2
\$\begingroup\$

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

Improve this question
\$\endgroup\$
2
  • \$\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, 2015 at 19:48
  • \$\begingroup\$ I fixed my question to make it more on-topic \$\endgroup\$
    – that guy
    Sep 15, 2015 at 19:55

1 Answer 1

Reset to default
1
\$\begingroup\$

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/

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .