Free Transform Rectangle on JavaScript Canvas

Question

I am new to the JavaScript canvas element. I actually just started a few hours ago. I'm working on a free transform of a rectangular section of an image. (For an example of what I am calling a "free transform," see this: http://www.html5.jp/test/perspective_canvas/demo1_en.html . Please note that I do not want to be able to allow the user to transform the image with handles as this example features.)

I know a little bit of how to transform a large image, but I want to transform only the left half (for example) of an image. How can I single out a section and free transform it? I'm guessing I should start by loading the image. I'm also betting the solution will involve marking the left side with paths. But setTransform() doesn't given me the control I need. I would like to have a function similar to this:

function freeTransform(canvas, image,
  startX1, startY1, startX2, startY2, startX3, startY3, startX4, startY4,
  endX1, endY1, endX2, endY2, endX3, endY3, endX4, endY4)

But the canvas's context does not have this function (as far as I know). Would someone give me some direction? Thank you.

Answer 1

You are correct.

The html canvas cannot transform 1 corner of a rectangle using its common 2d context.

You can use "triangulation" to deform an image in canvas 2d to give it perspective:

http://tulrich.com/geekstuff/canvas/perspective.html

You can get closer to a perspective transform using canvas's 3d context (webGL).

You can use non-parallel transforms to deform an image in webGL to give it perspective:

http://games.greggman.com/game/webgl-3d-perspective/