I'm trying to implement a simple image editing app with some basic features. I'm currently using a SVG as my canvas and populating it with a background image since I will need the ability to add shapes, text etc. which I believe would be easier to work with if I am working with SVG.
My specific question right now is regarding applying filters. I'm currently able to use CSS filters to apply effects (e.g., blur, sepia) to the entire image. However, I want to add the ability to allow users to draw a region (similar to a layer in photoshop) and then apply a filter only to that. Example of what I mean:
In this example, I need the ability to apply a filter only to the two regions that were drawn.
Current implementation: For drawing the regions, I'm currently creating a clipPath based on the drawn path and then clipping an svg image based on that clipPath (making it look like the drawn path is still a part of the background image)
Issue: It appears as though CSS filters cannot be applied to SVG elements like image or rect. Can someone please recommend a potential alternative for this? Or if you are aware of a better way to implement this sort of an editor in general, I'd be grateful for any references.
