CODEWITHSUNDEEP
javascripthtmltextcanvasperspective
luisdemarchi
luisdemarchi

Reputation: 1572

HTML5 canvas: Text in perspective

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.

Upvotes: 0

Views: 2102

Answers (2)

Strille
Strille

Reputation: 5781

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/

Upvotes: 0

markE
markE

Reputation: 105035

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.

Upvotes: 1

Related Questions