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:

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.

1 Answer 1


CreateJS would be a comprehensive choice. It offers the following tools:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.