javascript - HTML5 Canvas smooth scroll tilemap -

i've tried build scrollable tilemap canvas object automatically calculates it's size relative screen resolution , renders tiles relative position on (bigger) map.

i planned move generated tiles , draw tiles need drawn new.

so means scroll map, draw new tiles @ top (for example on moving upwards) , deleting last tiles on botton out of visible canvas.

my problem is:

i don't think it's performance change position of every tile in canvas, think solved using getimagedata() , putimagedata() there still 1 problem left:

if move these tiles , draw new tiles "hop" 30px (1 tile = 30x30), there simple / performance technically way make smooth, linear scroll effect?

just fill board wither using drawimage or pattern (the latter require use translate tiles in right position).

drawimage takes new destination size argument can zoom tiles too.

here pattern implementation made other question, assume should able see goes on in code:

function fillpattern(img, w, h) {      //draw tile once     ctx.drawimage(img, 0, 0, w, h);      /// draw horizontal line cloning     /// drawn tiles before     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 can see in implementation used for (video wall live scaling , tiling).

to project more have - instead of drawing each tile above can draw canvas new position , fill in new "gap":

ctx.drawimage(mycanvas, offsetx, offsey); fillgap(); 

you have used clipping drawimage canvas clip new internally there no gain in clipping image in javascript move part of outside canvas.