I want to use Canvas/WebGL technologies for creating lots of full Width/Height background images with custom shapes clipping/masking.
Here are the features I am looking for:
- Layers
- Custom shapes
- Clipping/Masking
- Images
- 2d drawing - 3d is not important
- Should be easy to animate (I will use Greensock for animation).
I have found some famous libraries for canvas like:
- Three.js
- pixi.js
- Kinetic.js
- Fabric.js
- etc...
Example Of Usage: A fixed canvas behind the website content, with cover image(full width & height) masked in to two sections which animated and reveal the cover image as the users scroll.
What i have tried: I have used kinetic.js but it is very poor with clipping/masking features -- In starting, it looked like the right choice for 2D controls but I feel like all my time have been wasted on this as it has a very poor support for using custom shapes for clipping over images.
My Particular Scenario: I am making a parallax site using ScrollMagic & Greensock plugin. I have 7 ~ 8 sections each with its own background image which animates in a fancy way using svg -- but svg is very low performance and i want to switch it with a canvas -- I have done that already using kinetic.js, but it does not provide any good support for clipping custom shapes on images for animation.
Any suggestion would be much appreciated.
