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

You could try function transferPoint (xI, yI, source, destination) explicated here.

Source and destination are the four points of source and destination rectangles. The code works for (SVG) path coordinates (curve and line), but with some modification should work also with pixels.