How to optimally render game graphics on html canvas?

Question

JavaScript

I use 4 canvas layers to draw the game world with a top-down camera (statics, animated / game objects, characters, trees and roofs (everything with a z-index greater than characters). The size of one location is 2880x1600, the size of each canvas corresponds to the location. I only redraw "dirty" areas. True, there is no single rendering manager, each object has its own handler.
The essence of the problem is that while the camera is moving (by shifting canvas coordinates), performance drops catastrophically, which causes movement on weak machines At the same time, animation rendering without moving the camera is quite adequate. How best to redesign the architecture to reduce the
load ?

Answer 1

I think that CSS transform: translate() will work a little faster, this time.
You can stop drawing while moving, this is 2.
You can try to disable pointer-events in css.
But the main point is that the larger the location, the more friezes there will be, there is nowhere to run away from this until you start drawing on canvas to the screen size (the access time to larger resources is always longer). How to redraw a tilemap quickly while keeping the map moving smoothly? You can look at the implementation of Yandex maps, where the map is drawn a little more than the screen by the size of the tile, smoothly shifted by the transformation and only a new edge is drawn when shifted by more than 1 tile. There is a profile, mail, write, I can explain a little more.