HTML5 canvas drawImage using points?

Question

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 con

Answer 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.