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 context.drawImage only accepts 1 positon.

It should be like this, 4 positions:

x,y----------x,y
 |            |
 |            |
 |            |
 |            |
 |            |
x,y----------x,y

Answer 1

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/