I'm making a mode7 game like mario-kart and I need to tilt the image before I draw it, I have tried using a buffer canvas to tilt the image then draw it on the games canvas but this makes it laggy (because the image of map is 1280 x 2556.)

So my question is:

How can I rotate my image before i draw it

  • \$\begingroup\$ How the original Mario Cart did it is off-topic on this website, but let me give you a hint what to google for: SNES Mode7. To get fast 3d rendering in HTML5 canvas, you should look into using WebGL. A complete explanation would be far too long to write as an answer, but doing a basic WebGL tutorial should tell you enough to do what you want to do. \$\endgroup\$ – Philipp Sep 15 '15 at 19:48
  • \$\begingroup\$ I fixed my question to make it more on-topic \$\endgroup\$ – that guy Sep 15 '15 at 19:55

This might be a bit late, but you could do this by rotating the image using CSS, if you want to dynamicly change the image you could rotate a canvas.

// Edit the prespective and rotation to get your desired result
canvasElement.style.transform = "perspective(600px) rotateX(20deg)";

Here is a JSFiddle: https://jsfiddle.net/8L4zgvkp/

  • \$\begingroup\$ There are lot easier ways than this, like ctx.rotate \$\endgroup\$ – Bálint Jan 6 '17 at 6:57
  • 1
    \$\begingroup\$ @Bálint Yeah but ctx.rotate doesn't have perspective like Mode7 \$\endgroup\$ – DayDun Jan 6 '17 at 10:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.