Drawing Tile Maps in canvas

Question

I am attempting to draw a tile map using 64x64 tileable images onto the HTML5 Canvas. They are named 1.png, 2.png, and 3.png. They are just 64x64 images that I intend to use to tile on a canvas background. 1.png is a pure green image, 2.png is pure grey image, 3.png is a pure brown image.
Here is my HTML:

<canvas id='gameCanvas'></canvas>
<script src='Index.js'></script>

Here is my JavaScript:

var canvas = document.getElementById('gameCanvas'),
ctx = canvas.getContext('2d');
canvas.width = 512;
canvas.height = 512;
var map = ['2','2','2','2','2','2','2','2','2','2',
        '2','1','1','1','1','3','1','1','1','2',
        '2','1','1','1','1','3','1','1','1','2',
        '2','2','2','2','2','2','2','2','2','2'],
x = 0,
y = 0,
image = new Image();

for (var j = 0; j < map.length; j++){
    image.onload = function(){
        if(x == 512){
            x = 0;
         y += 64;
    }
    x += 64;
    ctx.drawImage(image, x, y);
}
image.src = 'Images/' + map[j] + '.png';
}

For Some reason, it seems to be drawing all the images in one place. I think it has something to do with the image.onload = functtion(){}. Can anyone help me make this code draw each image 64 pixels (The width and Height of the images) apart.

Unknown Unknown · Accepted Answer · 2014-01-30T22:11:28

You need to start your loop inside the onload handler. Having onload inside the loop will only trigger once (when the image has loaded, not because of the loop).

image.onload = function(){
    for (var j = 0; j < map.length; j++){
        /// todo: actually use map index to determine source rectangle
        /// in spritesheet
        if(x == 512){
            x = 0;
            y += 64;
        }
        x += 64;
        ctx.drawImage(this, x, y);  /// todo: need to specify sprite rectangle
    }
}

You will probably also need to specify the source rectangle for your drawImage() method but as you don't show the image we can't tell (your loop also ignores the map tile index).

Update

Ok, based on comments, here is an example loading images using the YAIL loader (as suggested) integrated into the original code (assuming the script is already included):

Demo (with random tiles)

var canvas = document.getElementById('gameCanvas'),
    ctx = canvas.getContext('2d');

canvas.width = 512;
canvas.height = 512;

var map = [2,2,2,2,2,2,2,2,2,2,  /// use numbers instead of strings here
           2,1,1,1,1,3,1,1,1,2,
           2,1,1,1,1,3,1,1,1,2,
           2,2,2,2,2,2,2,2,2,2],
    x = 0,
    y = 0,

    /// loader code
    loader = (new YAIL({
        done: drawTiles,                    /// called when images are loaded
        urls: ['1.png', '2.png', '3.png']   /// order will be preserved
    })).load();                             /// start loading

function drawTiles(e) {

    /// loop and get map index
    for (var j = 0, tile; tile = map[j]; j++){
        if(x == 512){
            x = 0;
            y += 64;
        }
        ctx.drawImage(e.images[tile - 1], x, y);
        x += 64;
    }
}

An error handler should be added as well for final code.

Drawing Tile Maps in canvas

1 Answers

Demo (with random tiles)