DrawImage is not drawing in a canvas

Question

Basically what I have been trying to do, is make a loop that will cycle through a tonne(only 36 atm) of tiles, and place them in order. While that part works, it doesn't actually load the images and display the images.

Using console.log, I've narrowed the problem down to when it draws the image(or at least I'm pretty sure that's the problem).

I've tried switching local, and global variables, and that doesn't seem to do anything, and I've also switched what I had as just:

ctx.drawImage(loadTile, tileToLoadX, tileToLoadY);

To:

loadTile.onload = function() {
ctx.drawImage(loadTile, tileToLoadX, tileToLoadY);
};"

As many people have suggested to do with similar problems.

var canvas = document.getElementById("mapcanvas");
var ctx = canvas.getContext("2d");

GTH = 3000;
GTW = 3000;

tileCountX = 6;
tileCountY = 6;

mapWidth = tileCountX * GTW;
mapHeight = tileCountY * GTH;

function imageSearch() {
for (u=1; u < tileCountY + 1; u++) {
    for (i=1; i < tileCountX + 1;i++) {
    tileToLoad = "x" + i + "y" + u;
    tileToLoadX = i * GTW - GTW;
    tileToLoadY = u * GTH - GTH;
    console.log("Successfully found tile " + tileToLoad);
    loadImg();
    }
}
};
function loadImg() {
var loadTile = new Image();
loadTile.src = 'Top/x+y+/' + tileToLoad + ".png";
loadTile.onload = function() {
ctx.drawImage(loadTile, tileToLoadX, tileToLoadY);
};
console.log("Successfully loaded tile " + tileToLoad);
};

imageSearch();

Also note that the canvas is supposed to be the same size as the tiles, and that GTH, and GTW are the default heights and widths of all the tiles.

Help would be appreciated! Thank you!

Answer 1

In your function

function loadImg() {
    var loadTile = new Image();
    loadTile.src = 'Top/x+y+/' + tileToLoad + ".png";
    loadTile.onload = function() {
        ctx.drawImage(loadTile, tileToLoadX, tileToLoadY);
    };
    console.log("Successfully loaded tile " + tileToLoad);
};

The variables tileToLoad, tileToLoadX and tileToLoadY belong to the function imageSearch() as local variables and would be undefined.

Also, the loadTile.onload action need to be set BEFORE you assign the src for the image variable.

Try making the following changes.

function imageSearch() {
    for (u=1; u < tileCountY + 1; u++) {
        for (i=1; i < tileCountX + 1;i++) {
            tileToLoad = "x" + i + "y" + u;
            tileToLoadX = i * GTW - GTW;
            tileToLoadY = u * GTH - GTH;
            console.log("Successfully found tile " + tileToLoad);
            loadImg(tileToLoad,tileToLoadX,tileToLoadY); //send variables along
        }
    }
};

function loadImg(img,imgX,imgY) { //added new arguments for the function
    var loadTile = new Image();
    loadTile.onload = function() {
        ctx.drawImage(loadTile, imgX, imgY);
    };
    loadTile.src = 'Top/x+y+/' + img + ".png"; //moved this to after the onload.
    console.log("Successfully loaded tile " + img);
};

Answer 2

I have 2 ideas to what might be going on.

1. Your src path isn't correct

loadTile.src = 'Top/x+y+/' + tileToLoad + ".png";

Verify there aren't any load issues in the console.

2. You're drawing your images offscreen

Is your canvas really 18000 pixels wide? Try ctx.drawImage(loadTile, 0, 0); and see if the image is drawn to the canvas.

Note

Don't use global variables. imageSearch() will most likely fully execute before your first image has loaded. This will cause all of your tiles to be drawn at the same position, which I'm sure you don't want.