Transform image on canvas based on 4 points

Question

I have a small application that uses Paperjs to render an image between four points.

The user should be able to drag these four points freely. It would be nice if the image inside automatically transforms into this given tetragon, like on the picture below.

Do you know a library that is able to help me with this job?

Of course Paperjs is able to apply a matrix transformation, but is there a “simpler” solution like:

Image.transform(point1, point2, point3, point4);

Just like this ActionScript demo, but in Javascript with canvas: http://www.rubenswieringa.com/code/as3/flex/DistortImage/

Thank you!

Answer 1

This d3.js codesnippet did the job for me:

http://bl.ocks.org/mbostock/10571478