Draw distorted image on html5's canvas

Question

Is it possible, and if so how, to draw images with its four corners distorted to a non rectangular shape. For example if you were wanting to draw the image as if it had bee

Answer 1

The easiest way is to apply a transformation to the canvas before drawing the image.

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations

With skewing transformations you can make it look like it was drawn in perspective

Here's a very simple example:

ctx.setTransform (1, -0.2, 0, 1, 0, 0);
ctx.drawImage(blah);