CODEWITHSUNDEEP
javascripthtml
test
test

Reputation: 18198

HTML5 Canvas drawImage only draws after second refresh

OK, I have a HTML5 canvas... and it draws images from .png tiles (32x32). It works. Sort of. It only draws on the canvas after the second refresh. For example, if you were to load it up... al you would see is a red canvas (the background for #canvas is red) then if you were to refresh it... it would be successfully draw the images... why is that?

Here is the code. (All you need is two images. t0.png and t1.png in line_tiles folder) But I am sure you can spot the error right away that I can't :P

game.js

// HTML5 JS Tile Example
var canvas, context, board, imageObj, tiles;
var currentMap = 1;
var upMap = 0;
var rightMap = 0;
var leftMap = 0;
var downMap = 3;
var NUM_OF_TILES = 1; // starting from ZERO

// Set return 2D array of map
function loadMap(map) {
    if (map == 1) {
        return [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];
    }
}

// On load...
window.onload = function () {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    imageObj = new Image();
    tiles = [];
    board = loadMap(1);

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

    // 2. SET UP THE MAP TILES
    for (x = 0; x <= NUM_OF_TILES; x++) {
        imageObj = new Image(); // new instance for each image
        imageObj.src = "line_tile/t" + x + ".png";
        tiles.push(imageObj);
    }
    var theX;
    var theY;
    // 3. DRAW MAP BY ROWS AND COLS
    for (x = 0; x <= 10; x++) {
        for (y = 0; y <= 15; y++) {

            theX = x * 32;
            theY = y * 32;
            context.drawImage(tiles[board[x][y]], theY, theX, 32, 32);
        }
    }
};

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>HTML5</title>

    <script type="text/javascript" src="game.js"></script>
    <style type="text/css">
<!--
 #canvas {
       background:red;
       z-index:0;
       position:relative;       
    }

.container {
    width: 512px;
    position: relative;   
}
-->
</style>
</head>
<body>
<div class="container">
<canvas id="canvas"></canvas>
</div>
</body>
</html>

Upvotes: 2

Views: 4323

Answers (1)

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382474

You need to add onload hooks on your images (the tiles) and draw only when all images are loaded.

Here's a suggestion :

// HTML5 JS Tile Example
var canvas, context, board, imageObj, tiles;
var currentMap = 1;
var upMap = 0;
var rightMap = 0;
var leftMap = 0;
var downMap = 3;
var NUM_OF_TILES = 1; // starting from ZERO

// Set return 2D array of map
function loadMap(map) {
    if (map == 1) {
        return [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]];
    }
}


// On load...
window.onload = function () {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    imageObj = new Image();
    tiles = [];
    board = loadMap(1);

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

    var draw = function() {
        var theX;
        var theY;
        // 3. DRAW MAP BY ROWS AND COLS
        for (x = 0; x <= 10; x++) {
            for (y = 0; y <= 15; y++) {

                theX = x * 32;
                theY = y * 32;
                context.drawImage(tiles[board[x][y]], theY, theX, 32, 32);
            }
        }
    } 

    var loadedImagesCount = 0;

    // 2. SET UP THE MAP TILES
    for (x = 0; x <= NUM_OF_TILES; x++) {
        var imageObj = new Image(); // new instance for each image
        imageObj.src = "line_tile/t" + x + ".png";
        imageObj.onload = function() {
            loadedImagesCount++;
            if (loadedImagesCount==NUM_OF_TILES) draw();
        };
        tiles.push(imageObj);
    }

};

And be careful not to forget the var keyword (look at the loop).

Upvotes: 5

Related Questions