I'm planning on building some fancy notebook page tear animation effect with HTML5 Canvas. I'm not new to Javascript, though I'm new to HTML5 Canvas. It doesn't seem complicated at all. After browsing a lot of tutorials, I couldn't figure out was how to get similar functionality like Photoshop's Free Transform Warp. My idea was to paint the complete page, and then, for each animation frame, translate this differently using some kind of warp. Is this possible with a transform method or do I have to write my own method for this? See this screenshot of the warp I'm quickly drew:
You are probably wondering why not paint a custom shape using the Quadratic Curves? Well, I want the grad pattern to be wrapped as well. So I had in mind to paint a plain page, and after that transform it using some kind of warping, warping the grid as wel..