Faster Map Rendering - HTML5 Game Development Insights - page 272

var yTileMin = Math.floor((gMap.viewRect.y) / gMap.canvasTileSize.y);
var yTileMax = Math.floor((gMap.viewRect.y+gMap.viewRect.h) / gMap.canvasTileSize.y);
if(xTileMin <0) xTileMin=0;
if(yTileMin <0) yTileMin=0;
var visibles=[];
for(var yC = yTileMin; yC <=yTileMax; yC ++)
{
for(var xC = xTileMin; xC <=xTileMax; xC ++)
{
var rk = {
x:xC * gMap.canvasTileSize.x,
y:yC * gMap.canvasTileSize.y,
w:gMap.canvasTileSize.x,
h:gMap.canvasTileSize.y
};
var found = false;
for(var i =0; i < gMap.canvasTileArray.length; i++)
{
if(gMap.canvasTileArray[i].doesMatchRect(rk.x,rk.y,rk.w,rk.h))
{
found = true;
visibles.push(gMap.canvasTileArray[i]);
}
}
if(found) continue;
var cv = fetchFreeCanvas();
cv.x = rk.x;
cv.y = rk.y;
fillCanvasTile(cv);
visibles.push(cv);
}
}
At this point, rendering is straightforward; you simply walk through the visible tiles and draw them on the screen.
All the heavy lifting has been done already, so you're mostly good to go:
var r2 = gMap.viewRect;
//aabb test to see if our view-rect intersects with this canvas.
for(var q =0; q < visibles.length; q++)
{
var r1 = visibles[q];
var visible= intersectRect( {top:r1.y,left:r1.x,bottom:r1.y+r1.h,right:r2.x+r2.w},
{top:r2.y,left:r2.x,bottom:r2.y+r2.h,right:r2.x+r2.w});
if(visible)
ctx.drawImage(r1.cvsHdl, r1.x-gMap.viewRect.x,r1.y-gMap.viewRect.y);
}
}