cant get canvas to display anything

Question

Im trying to draw tiles to a canvas i even followed a tutorial, i made sure the images are in the same directory and i just cant see why this isnt working its exactly like the tutorial. can someone please see the error im failing to see, its driving me up the wall.

<!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>
        RPG 
    </title>

    <link rel="stylesheet" type="text/css" href="main.css">
    <!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js">    </script>
    <script type="text/javascript" src="main.js"></script>-->

</head>

<body>

<canvas id="canvas" height="900px" width="900px"></canvas>
<script>

var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var map_array = [

    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,1,1,1,1,1,1,1,0,0],
    [0,0,0,1,1,1,1,1,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0]

    ];

    var grass=new Image();
    var dirt=new Image();

    grass.src='grass.png';
    dirt.src='dirt.png';


    var posX = 0;
    var posY = 0;

    for(i = 0; i < map_array.length; i++){

        for(j = 0; j < map_array[i].length; j++){

            if(map_array[i][j] == 0){

                context.drawImage(grass, posX, posY, 75,75);

            }
            if(map_array[i][j] == 1){

                context.drawImage(dirt, posX, posY, 75,75);

            }

            posX+=75;

        }

        posX = 0;
        posY+=75;


    }

</script>

</body>

</html>

Probably the images can't be found. Any errors in the Javascript console? Are the images in the same directory as the *html*? They should be... it's not relative to the JS. — Hamza Kubba, Apr 25 '14 at 04:08
its all in the same folder ive rin through it in the dev tools and there are no errors — user2827925, Apr 25 '14 at 04:17

score 0 · Answer 1 · answered Apr 25 '14 at 04:26

Please check the console, as mentioned in the comments its probably the images not loading, because I just quickly changed the src of the images and its working as expected.

Here us a JSFiddle to check it.

Code

<canvas id="canvas" height="900px" width="900px"></canvas>
<script>

var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var map_array = [

    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,0,0,0,0,0,1,1,0,0],
    [0,0,0,1,1,1,1,1,1,1,0,0],
    [0,0,0,1,1,1,1,1,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0],
    [0,0,0,1,1,0,0,0,1,1,0,0]

    ];

    var grass=new Image();
    var dirt=new Image();

    grass.src='http://i.imgur.com/tL6nW.gif';
    dirt.src='http://i.imgur.com/BfZ5f.gif';


    var posX = 0;
    var posY = 0;

    for(i = 0; i < map_array.length; i++){

        for(j = 0; j < map_array[i].length; j++){

            if(map_array[i][j] == 0){

                context.drawImage(grass, posX, posY, 75,75);

            }
            if(map_array[i][j] == 1){

                context.drawImage(dirt, posX, posY, 75,75);

            }

            posX+=75;

        }

        posX = 0;
        posY+=75;


    }

</script>

wow what the hell, both images are grass.png and dirt.png and are in same folder what should i do? — user2827925, Apr 25 '14 at 04:30
yes actually its probably because the canvas is getting drawn before the images are getting loaded. You can load the images by AJAX first and then render. check this link .http://stackoverflow.com/questions/8761713/jquery-ajax-loading-image — Shiva, Apr 25 '14 at 04:39

score 0 · Answer 2 · answered Apr 25 '14 at 04:36

You can use an image's .onload callback to give all images time to fully load before trying to draw with them.

Example code and a Demo: http://jsfiddle.net/m1erickson/QeKR8/

var imageCount=2;
var grass=new Image();
grass.onload=start;
var dirt=new Image();
dirt.onload=start;
grass.src='https://dl.dropboxusercontent.com/u/139992952/multple/grass.png';
dirt.src='https://dl.dropboxusercontent.com/u/139992952/multple/sand.png';
function start(){

    if(--imageCount>0){return;}

    var map_array = [
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,0,0,0,0,0,1,1,0,0],
        [0,0,0,1,1,1,1,1,1,1,0,0],
        [0,0,0,1,1,1,1,1,1,1,0,0],
        [0,0,0,1,1,0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0,0,1,1,0,0]
    ];

    var posX = 0;
    var posY = 0;

    for(i = 0; i < map_array.length; i++){
        for(j = 0; j < map_array[i].length; j++){
            if(map_array[i][j] == 0){
                context.drawImage(grass, posX, posY, 25,25);
            }
            if(map_array[i][j] == 1){
                context.drawImage(dirt, posX, posY, 25,25);
            }
            posX+=25;
        }
        posX = 0;
        posY+=25;
    }
}

cant get canvas to display anything

2 Answers2