Image drawn into canvas shape

Question

I created a shape in canvas and want to drawn an image in it.

So far I can clip the image to the shape but I want the image to adapt it self with the Free Transform -> Distort effect or something similar.

In the example:

• The image on the left is the clipped one.
• The image on the right is the original.
• The bottom image is the result I want to achieve.

The code can be seen here: http://jsfiddle.net/NAe9c/

The code result can be seen here: http://www.tribalddb.pt/final.jpg

edited:
Thank You all
I accepted that answer to this issue but I found another alternative to my problem, CSS 3D. I didn't know it until now =P

Answer 1

Yes, you can draw things flat and have them rendered in perspective. You can't do it simply with a 2D transform so there's a bit of math to the ordeal if you want to use the 2D context but nothing insane.

I'd suggest doing a search for "canvas perspective transform" and you'll find a lot of demos, like this one:

http://tulrich.com/geekstuff/canvas/perspective.html

Answer 2

You will need to do perspective correction for something like this, I think it would be easier to get a library to do it for you, have considered using:

Three.js