I am playing around with the HTML5 canvas and have begun implementing a tile engine.

However, it's currently very inefficient: I have a 100x100 2D array and my code loops through the whole thing every frame. (Very bad, I know.) I'd like to optimise the rendering loop by using a viewport or camera to determine which parts of the area are view.

Here is an example. I haven’t added the camera offset yet because I’m not sure how:

for (var y = 0; y < state.map_data.length; y++) {
    col = state.map_data[y];
    for (var x = 0; x < col.length; x++) {
        color = (state.map_data[y][x]==1)?'#fff':'#000';            
            x: x * state.tile_width,
            y: y * state.tile_height,
            width: state.tile_width,
            height: state.tile_height,
            fill: color,
            visible: true

Here is a link to the game as it is.

How can I make this more efficient?

  • \$\begingroup\$ Have you considered spatial partitioning e.g. with a quadtree? \$\endgroup\$
    – Anko
    Mar 7, 2013 at 0:10
  • \$\begingroup\$ You don't need spatial partitioning to cull a uniform grid. \$\endgroup\$
    – MarkR
    Mar 7, 2013 at 16:34
  • \$\begingroup\$ Thanks @Anko I haven't hear of the quadtree but it i some I would look into \$\endgroup\$
    – ianmac
    Mar 7, 2013 at 19:10

1 Answer 1


From my understanding you just read the camera bounds and use that as your index reference of your tile grid. Draw from the first tile in the top left corner of your current screen, relative to the cameras position, to the last tile of your bottom right corner index. This way you only draw tiles that are within camera bounds.

For example the first would be something like so:

int indexX = topleftXBound/ tileSize;
int indexY = topleftYBound/ tileSize;

Then calculate the right bottom bound. You can use these indexes to determine what starting point and limit you should use for your forloop. Instead of drawing 100x100 tiles. You only a few in comparison.

You could represent your camera as a simple rectangle that you move around. Have the center, the width and height.

  • \$\begingroup\$ Erm, yes. Calculate the minimum and maximum x and y coordinates visible, and only draw the tiles within those limits. \$\endgroup\$
    – MarkR
    Mar 7, 2013 at 16:35
  • \$\begingroup\$ Thanks @Sidar That help quite a lot I can't seem to post the code but you got me think i the right way \$\endgroup\$
    – ianmac
    Mar 7, 2013 at 19:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .