Using Html5 API, how can I distort a image (change the left or right side height)?

I have a image on a canvas and I want to display it on a "wall". For doing that, I need to distort the image such as the left side of the image to be bigger that the right side( I'm trying to get a perpective view).

Could you give 开发者_运维问答me some examples or advice about how I can do that?

Thanks.

The canvas API doesn't have 3D functionality built in. You could have a look for some of the first person shooter games written for HTML5 canvas that are around. A quick google found this for example, and there is more:

http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

Also there is a CSS standard for 3D transformations, which however is currently only supported by Webkit browsers:

http://www.w3.org/TR/css3-3d-transforms/