HTML5 Canvas distort transforms

Question

I definitely need these kind of Photoshop transformations for my Canvas. I found this plugin, but the quality of transformed image is really poor https://github.com/migurski/canvas-warp

Thanks for help. I really need this.

Answer 1

Perspective transforms are non-parallel transforms.

canvas.getContext("2d") will only allow you to do parallel transforms--no perspectives possible.

WebGL, which is canvas' 3d context, has a 4x4 transform matrix which will allow you to do non-parallel transforms. Therefore you can do perspective transforms in WebGL.

Problem is browser adoption of WebGL: Chrome:Yes, Mozilla,Safari,Opera:Probably(min functioning), IE,IOS,Android:No.

You can also do x/y/z transforms in CSS3. This allows perspective transforms also. Browser adoption is better: IE:Probably, Opera:No, all the others:Yes.

[ Edited -- Ok, if you really need to use canvas2D to display perspective ]

Thatcher Ulrich created a fantastic Canvas2.5D script that uses a 3x4 matrix to do the perspective math. Then he maps his 3x4 matrix into the normal 3x3 matrix to display to the perspective adjusted image to the canvas.

Here's his very cool demo: http://tulrich.com/geekstuff/canvas/perspective.html

Warning: difficult math concepts ahead...!

His matrix code is in the jsgl.js script used in the demo.