Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question
Have you considered spatial partitioning e.g. with a quadtree? – Anko Mar 7 '13 at 0:10
You don't need spatial partitioning to cull a uniform grid. – MarkR Mar 7 '13 at 16:34
Thanks @Anko I haven't hear of the quadtree but it i some I would look into – ianmac Mar 7 '13 at 19:10
up vote 4 down vote accepted

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.

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

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.