Make CSS filters work with `CanvasFilter`

[tomayac]

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]

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]

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

This would work for me.

[mysteryDate]

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