Untitled

HTML5 Canvas Cropping in Chrome (performance issue)

function drawMap()

{

 

row = Math.floor(canvasOriginY / 3000);

col = Math.floor(canvasOriginX / 3000);

 

remainderX = Math.floor(canvasOriginX % 3000);

remainderY = Math.floor(canvasOriginY % 3000);

 

pixelsShowingX = Math.floor(3000 - remainderX);

pixelsShowingY = Math.floor(3000 - remainderY);

 

pixelsMissingX = Math.floor(canvas.width() - pixelsShowingX);

pixelsMissingY = Math.floor(canvas.height() - pixelsShowingY);

 

    // top-left image (always)

context.drawImage(mapImages[row][col], remainderX, remainderY, pixelsShowingX, pixelsShowingY, 0, 0, pixelsShowingX, pixelsShowingY);

 

    // top-right image (if needed)

if (pixelsMissingX > 0)

    context.drawImage(mapImages[row][(col+1)], 0, remainderY, pixelsMissingX, pixelsShowingY, pixelsShowingX, 0, pixelsMissingX, pixelsShowingY);

 

    // bottom-left image (if needed)

if (pixelsMissingY > 0)

    context.drawImage(mapImages[(row+1)][col], remainderX, 0, pixelsShowingX, pixelsMissingY, 0, pixelsShowingY, pixelsShowingX, pixelsMissingY);

 

    // bottom-right image (if needed)

if (pixelsMissingX > 0 && pixelsMissingY > 0)

    context.drawImage(mapImages[(row+1)][(col+1)], 0, 0, pixelsMissingX, pixelsMissingY, pixelsShowingX, pixelsShowingY, pixelsMissingX, pixelsMissingY);

    }