How to draw tilemap only once instead of 60 times per second?

Question

Canvas

Good afternoon, I recently made a test tilemap using Tiled and saved it in JSON format in order to transfer this map to canvas. For this I use this lib . With it, loading the map is simple:
tmxJSON.load('firstTiledMap.json');
I had no problems with displaying the map on the canvas. But the problem arose in the following: I have an update() function that executes the clearRect and fillRect functions 60 times per second. That is, the canvas is cleared and overwritten. This is necessary for game objects (player movement).
When rewriting TIlemap, the browser starts to slow down wildly, which does not even close the tab.
But the Tilemap is static and nothing can change on it, the question is:
How can I redraw only the objects and not touch the Tilemap?
Thank you.

Answer 1

Well, you can draw the tilemap once on the canvas, remember it with getimagedata and draw it every time with putimagedata .
Well, in general, this lib has a method tmxJSON.drawTiles();that draws a tile map, and if you have it on the whole canvas, then clearRect is not needed at all, since it already covers everything ( I don’t understand why you call fillRect ). I tried nothing, nothing lags all the rules. Maybe you call update in the method , well then it’s clear why you are lagging 60 times per second loading the map (well, at least trying to load it). And also if you use setTimeout in the game loop ( update ) or God forbidtmxJSON.load('firstTiledMap.json');setInerval , change it to requestAnimationFrame .
PS You won't be able to draw once, you only need to redraw if you don't use two canvases superimposed on each other, draw a tile on the back, and animation on the front