search

fserb / canvas2D

Update Canvas 2D API
Other
142 stars 23 forks source link

Make CSS filters work with `CanvasFilter` #22

Open tomayac opened 2 years ago

tomayac commented 2 years ago

Right now, there are two ways to provide filters: one for "simple" CSS filters (example: offscreenCanvas.filter = 'brightness(1)') and one for more complex SVG filters (example: offscreenCanvas.filter = new CanvasFilter([…])). Ideally, simple CSS filters could be modeled as {filter: 'brightness', amount: 1} as well, so they can all be passed in one big filter array.

Kaiido commented 2 years ago

I wonder if passing the CSS strings directly in the filter property wouldn't be better here instead of "inventing" new properties which doesn't really map to anything (e.g what should be the properties for drop-shadow). So maybe something like the following could do?

new CanvasFilter([
  {
    filter: "convolveMatrix", 
    kernelMatrix: [ ... ]
  },
  {
    filter: "brightness(70%)"
  }
]);

cc @mysteryDate

tomayac commented 2 years ago

I wonder if passing the CSS strings directly in the filter property wouldn't be better[.]

This would work for me.

mysteryDate commented 2 years ago

@Kaiido I like that solution too, will be very easy to implement and test.