html5画布缓存磁贴

Question

I'm making an MMO game in HTML5 Canvas . It's isometric and it has tiles and walls .

So I need to optimise the game for slow computers/mobile devices .
For that I want to cache my tiles and walls:

Once they are drawn, they are static/not animated

so I don't need to redraw them each time.

I also don't want to use two (or more) <canvas> objects so I want to use the same <canvas> element that I'm using to draw with requestAnimationFrame my game items/entities.

I've alerdy tried to draw the tiles and the walls to an offscreen canvas with the same width/height as the visible canvas and then draw it each time on the visible canvas,

but the visible canvas uses the resolution of the page so it's pretty the same CPU usage with or without cache on high resolutions (like my current screen: 1920x1080 )

How should I do this properly so I can reduce CPU usage and use memory instead ? Is it impossible without using two canvases?

Answer 1

You could try saving the static elements as an image after you draw the map for the first time and then call the image. It will be faster if you have a lot of elements involved into drawing the map.

If nothing overdraws these static elements during the gameplay they never have to be drawn again. Keep that in mind

EDIT: Alternatively you can draw smaller object and scale them ( refrence )

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

The second rectangle is twice as high and wide.