How can I increase framerate, when drawing tiles to a HTML canvas? I am using the HTML 5 canvas to make a simple platformer game. I am currently drawing the tiles using a for loop that runs through a list of tiles and checks if they will be drawn to the screen. for (var i 0 i lt tiles.length i ) if (tiles i .x scale gt pos.x (canvas.width 2) amp amp tiles i .x lt (pos.x scale) (canvas.width)) canvas.drawImage(tiles i .x pos.x, tiles i .y pos.y, scale, scale, "img Tiles " tiles i .Tile ".png") I am also using this custom library to draw the image to the screen this.drawImage function(x, y, width, height, src, alpha) if (alpha) ctx.globalAlpha alpha if (document.getElementById(src) undefined) document.head.innerHTML ' lt img width "16px" height "16px" src ' src ' id ' src ' gt lt img gt ' var img document.getElementById(src) ctx.drawImage(img, x, y, width, height) ctx.globalAlpha 1.0 document.getElementById(src).outerHTML "" When I run the for loop, the frame rate of the game seems to drop. Is there an alternate option to going through every element of the array that I'm not aware of?