Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Kaiido opened this issue Mar 29, 2021 · 3 comments
Open

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

Kaiido opened this issue Mar 29, 2021 · 3 comments

Comments

@Kaiido
Copy link

Kaiido commented Mar 29, 2021

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
Copy link
Collaborator

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
Copy link
Author

Kaiido commented Dec 3, 2021

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
Copy link
Collaborator

graveljp commented Nov 30, 2022

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:

  • Draw
  • Clip
  • Filter
  • Clip

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/.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants