Faster Map Rendering - HTML5 Game Development Insights - page 267

function fillCanvasTile(ctile)
{
var ctx = ctile.ctx;
//clear the tile itself
ctx.fillRect(0,0,ctile.w, ctile.h);
//create a mini-view-rect for this tile, which represents its bounds in world-space
var vRect={ top:ctile.y,
left:ctile.x,
bottom:ctile.y+ctile.h,
right:ctile.x+ctile.w};
//most of this logic is the same
for (var layerIdx = 0; layerIdx < gMap.currMapData.layers.length; layerIdx++)
{
if (gMap.currMapData.layers[layerIdx].type != "tilelayer") continue;
var dat = gMap.currMapData.layers[layerIdx].data;
//find what the tileIndexOffset is for gMap layer
for (var tileIDX = 0; tileIDX < dat.length; tileIDX++) {
var tID = dat[tileIDX];
if (tID == 0) continue;
var tPKT = gMap.getTilePacket(tID);
//test if gMap tile is within our world bounds
var worldX = Math.floor(tileIDX % gMap.numXTiles) * gMap.tileSize.x;
var worldY = Math.floor(tileIDX / gMap.numXTiles) * gMap.tileSize.y;
//figure out if the cache-tile rectangle intersects with the given smaller tile
var visible= intersectRect( vRect,
{top:worldY,left:worldX,bottom:worldY + gMap.tileSize.y,right:worldX +
gMap.tileSize.x});
if(!visible)
continue;
// Nine arguments: the element, source (x,y) coordinates, source width and
// height (for cropping), destination (x,y) coordinates, and destination width
// and height (resize).
ctx.drawImage(tPKT.img,
tPKT.px, tPKT.py,
gMap.tileSize.x, gMap.tileSize.y,
worldX - vRect.left,
worldY - vRect.top,
gMap.tileSize.x, gMap.tileSize.y);
}
}