Search code examples
javascripthtmltextcanvasperspective

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.

Solution

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