I have multiple canvases placed on top of each other for different layers (background, game objects, foreground). I was expecting this to allow me to have the background and foreground update at a lower frame rate, because they use either simple animations or static images. But currently, I can't really do that, because all layers still adjust to the player camera (the game camera centers to the movable player). In other words, I still have to redraw the foreground and background in 60fps to smoothly adjust to the camera movement, which seems excessive, since nothing on the canvas is changing that fast.
Is there a less expensive way to move a whole canvas (or everything on the canvas) compared to constantly redrawing the whole context with new offsets? This is for situations where everything on the canvas stays the same. And in case there's no better alternative, is using
putImageData() for the whole canvas and moving it going to be more efficient than redrawing each image with new offsets?