HTML5 canvas: Text in perspective

Question

I'm trying to create my first game to HTML5. And I search for hours like leaving a text persperctiva (for canvas).

See attached what I need. Are two "points" in text that needs to be modified to the effect that I need. Image: https://pbs.twimg.com/media/BVbuU1PCUAA7d8a.png

PS: I managed to leave with only the text "rotation" (basic) and that is not right for my purpose.

All topics that I found say in response is not possible.

Answer 1

Canvas's 2d context can't do the non-parallel transforming that is shown in your link.

To do perspective-like warping, you will need to use the canvas 3d context (webGL).

Alternatively, here is a post on how to interpolate pixels from an original triangle into a distorted triangle:

http://codeslashslashcomment.com/2012/12/12/dynamic-image-distortion-html5-canvas/

This will allow you to "manually" do perspective distortions in 2d context.

Answer 2

It doesn't look like there's much perspective involved, so you might get away with a simple skew:

var angle = -0.2;
context.setTransform(1, 0, angle, 1, 0, 0);
context.drawImage(img, 100, 0, 350, 100);

http://jsfiddle.net/fTQcn/