search

fserb / canvas2D

Update Canvas 2D API
Other
151 stars 25 forks source link

CanvasFilters - How do we set the dimensions of the filter? #14

Open Kaiido opened 3 years ago

Kaiido commented 3 years ago

There doesn't seem to be a way to set the width height x and y properties of the filter itself.

Should the CanvasFilter constructor takes these as parameters?
Or should the input be a dictionary with the array of filter components.

mysteryDate commented 2 years ago

Is there a use-case for this? In my tests width, height, x and y are exactly equivalent to applying a clip rect to the canvas before drawing.

https://jsfiddle.net/mxLo0cdf/

Kaiido commented 2 years ago

I think these actually do affect where the filter starts from, while with clip() the filter would first get applied and then been clipped. See https://jsfiddle.net/4x2q9kLu/ for an example where clipping doesn't produce the same result.
Also note that here we are talking about the <filter>'s attributes, the ones on each <feElement> could be set quite easily with the current API model, but to set the ones on the <filter> element means that we need an other signature for the constructor.
However I don't think this should be a blocker for the first release of CanvasFilters, just something to keep around.

graveljp commented 1 year ago

Our goal is to make filters only available on layers. Therefore, if you wanted to set a dimension to a filter, all you'd need to do is clip the layer itself.

In SVG, setting a dimension to a filter essentially does:

The first clip is what causes the difference in your example. You could do the same thing with canvas, see for instance: https://jsfiddle.net/no2zpLuv/.