HTML5 Canvas 通过平移与剪辑的平移图像效率

Question

There's a bunch of questions on panning a background image in a canvas (ie to simulate a 'camera' in a game with the character in the center) - and most answers suggest using the canvas' translate method.

But since you have to re-draw the image in each frame anyway, why not just clip it? Does it matter in terms of efficiency?

In particular, is panning like this a bad idea? (This example shows a simplified pan of the camera moving in one direction)

let drawing = new Image();
drawing.src = "img_src";
drawing.onload = function () {

    ctx.drawImage(drawing, 0, 0);
    let pos = 0
    
    setInterval(() => {
        pos += 1
        ctx.clearRect(0, 0, cnvs.width, cnvs.height);
        ctx.drawImage(drawing, -pos, 0 ); // "pans" the image to the left using the option `drawImage` parameters `sx` and `sy`
    }, 33);
};

Example result: fiddle

Thanks in advance!

Answer 1

The main advantage of using the transform matrix to control your camera is that you don't have to update all the elements in your world, you just move the world instead.

So yes, if you are willing to move only a single element (be it the background like in your case), moving only that one element might be a better choice.
But if you need several layers of elements to all move relatively to the camera, then using the transformation matrix is a better choice.

As for the perfs, I didn't ran any benchmarks on this, but I'd suspect it's exactly the same, though beware when messing with the cropping features of drawImage , at least Safari doesn't handle cropping from outside of a source canvas correctly .