HTML5 Canvas平滑滚动tilemap

Question

I've tried to build a scrollable tilemap with the canvas object which automatically calculates it's size relative to the screen resolution and renders the tiles relative to a position on a (bigger) map.

I planned to move the generated tiles and only draw the tiles that need to be drawn new.

So that means I scroll the map, draw the new tiles at the top (for example on moving upwards) and deleting the last tiles on the botton which are now out of the visible canvas.

My problem is:

I don't think that it's very good for the performance to change the position of every tile in the canvas, I think this could be solved using getImageData() and putImageData() but there is still one problem left:

If i just move these tiles and draw new tiles it will always "hop" for 30px (1 tile = 30x30), so is there a simple / performance technically good way to make this with a smooth, linear scroll effect?

Answer 1

Just fill the board wither using drawImage or pattern (the latter require you to use translate to get the tiles in the right position).

drawImage takes new destination size as argument so you can zoom the tiles too.

Here is a pattern implementation I made for some other question, but I assume you should be able to see what goes on in the code:

function fillPattern(img, w, h) {

    //draw the tile once
    ctx.drawImage(img, 0, 0, w, h);

    /// draw horizontal line by cloning
    /// already drawn tiles before it
    while (w < canvas.width) {
        ctx.drawImage(canvas, w, 0);
        w *= 2;
    }

    /// clone vertically, double steps each time
    while (h < canvas.height) {
        ctx.drawImage(canvas, 0, h);
        h *= 2;
    }
}

The performance is good as you can see in the implementation this was used for (video wall with live scaling and tiling).

To project this more to what you have - instead of drawing each tile as above you can simply draw the canvas to a new position and fill in the new "gap":

ctx.drawImage(myCanvas, offsetX, offseY);
fillGap();

You could have used clipping with drawImage but the canvas will clip this for new internally so there is no gain in clipping the image in JavaScript as you move part of it outside the canvas.