Html5 Canvas Drawimage Using Points?

I need to draw an image using 4 points. I have these 4 points stored in an array, these positions changes. Now I need to draw an image that reflects these positions. The context.dr

Solution 1:

Quad Warping is what you need, no complex 3D

You are asking to render a rectangular image to a, possible non rectangular, quad.

The correct way to do this is to calculate the transformation matrix, no need to render true 3D content. This is done calculating a Homography matrix. For that you need to understand transformation matrices and implement some code for solving some equations.

This process is well understood and requires the original four coordinates and the target four points and you have them, so you only need a process to calculate the transform matrix. This matrix is calculated basically by Gauss-Jordan elimination.

Check this on the matrix solver and the general procedure. Once you understand transformations it gets trivial to do it. Also check this to understand what a homography is. And here it's explained how it's calculated, with samples for javascript and CSS.

Demo

Here's an awesome demo with source and explanation.

Solution 2:

What you are looking for is called drawing a quad in 3D rendering language.

You usually split up your shape to 2 triangles (faces) and draw them individually using a texture filling.

Here is a (complex) solution for the problem: https://github.com/mrdoob/three.js/blob/master/src/renderers/CanvasRenderer.js#L838 Three.js 3D engine using 2D <canvas> as the rendering engine.

As the matter is not that straightforward I suggest you use Three.js or similar wrapper which provides high level abstraction over textured face operations. Check out other Three.js 2D <canvas> examples and you get the idea how it works:

http://mrdoob.github.com/three.js/