Fix javascript output of array

[yss]

I have an error at my code. Im outputting from an array, but he gives an error.
Please see the image bwlow. or look in the code. Can someone help me with this easy fix?


When I change the mapimage to gras1 it works. But not from an array.
console.log(map[i][y]);
image = map[i][y];
context.drawImage(image, y*32, i*32,32,32);

[/QUOTE][/QUOTE]I hope you know the fix for this little problem.

Greetz, Rabascm.

- - - Updated - - -

someone?

[MentaL]

[KarLi]

Hold on first of all tell us What are you trying to do and why?

[yss]

Im trying to output an image to an canvas.

[KarLi]

replace mapimage with imagebitmap ?

[I Am NoLimiT]

Note: You cannot call the drawImage() method before the image has loaded. To ensure that the image has been loaded, you can call drawImage() from window.onload() or from document.getElementById("imageID").onload.

Credits: w3schools.

[yss]

Thanks guys for helping me. I already did that.. my code:

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

var map = [
['gras1', 'gras2', 'gras1']];


var gras_with_flower = new Image();
gras_with_flower.src = `/dev/tiles/gras_with_flower.jpg`;
var gras_with_plant = new Image();
gras_with_plant.src = `/dev/tiles/gras_with_plant.jpg`;
var gras1 = new Image();
gras1.src = `/dev/tiles/gras1.jpg`;
var gras2 = new Image();
gras2.src = `/dev/tiles/gras2.jpg`;
var path_grass = new Image();
path_grass.src = `/dev/tiles/path_grass.jpg`;
var path_bottom = new Image();
path_bottom.src = `/dev/tiles/path_bottom.jpg`;
var path_grass = new Image();
path_grass.src = `/dev/tiles/path_grass.jpg`;
var path_left = new Image();
path_left.src = `/dev/tiles/path_left.jpg`;
var path_left_bottom = new Image();
path_left_bottom.src = `/dev/tiles/path_left_bottom.jpg`;
var path_left_top = new Image();
path_left_top.src = `/dev/tiles/path_left_top.jpg`;
var path_right = new Image();
path_right.src = `/dev/tiles/path_right.jpg`;
var path_right_bottom = new Image();
path_right_bottom.src = `/dev/tiles/path_right_bottom.jpg`;
var path_right_top = new Image();
path_right_top.src = `/dev/tiles/path_right_top.jpg`;
var path_sand_bottom = new Image();
path_sand_bottom.src = `/dev/tiles/path_sand_bottom.jpg`;
var path_sand_left = new Image();
path_sand_left.src = `/dev/tiles/path_sand_left.jpg`;
var path_sand_left_bottom = new Image();
path_sand_left_bottom.src = `/dev/tiles/path_sand_left_bottom.jpg`;
var path_sand_left_top = new Image();
path_sand_left_top.src = `/dev/tiles/path_sand_left_top.jpg`;
var path_sand_right = new Image();
path_sand_right.src = `/dev/tiles/path_sand_right.jpg`;
var path_sand_right_bottom = new Image();
path_sand_right_bottom.src = `/dev/tiles/path_sand_right_bottom.jpg`;
var path_sand_right_top = new Image();
path_sand_right_top.src = `/dev/tiles/path_sand_right_top.jpg`;
var path_sand_top = new Image();
path_sand_top.src = `/dev/tiles/path_sand_top.jpg`;
var path_top = new Image();
path_top.src = `/dev/tiles/path_top.jpg`;

function loadmap() {
for (i = 0; i < map.length; i++) {

for (y = 0; y < map[i].length; y++) {

console.log(map[i][y]);
image = map[i][y];
context.drawImage(image, y*32, i*32, 32, 32);

}

}
};