I have a function named loadTileSet() that is supposed to return an array called arrTiles containing image data. However, the function is returning UNDEFINED. I am using push method to populate the array..
function loadTileSet(){
var canvas = document.getElementById('fakeCanvas');
$('#fakeCanvas').hide();
var ctx = $("canvas")[0].getContext('2d');
var imgTileSet = new Image();
imgTileSet.src = 'tileset.png';
var imageTileNumWidth = 23;
var imageTileNumHeight = 21;
var arrTiles = [];
imgTileSet.onload = function(){
var imageWidth = imgTileSet.width;
var imageHeight = imgTileSet.height;
sndCanvasWidth = imageWidth/imageTileNumWidth;
sndCanvasHeight = imageHeight/imageTileNumHeight;
canvas.width = imageWidth;
canvas.height = imageHeight;
ctx.drawImage(imgTileSet,0,0,imageWidth,imageHeight);
var i=0;
var j=0;
var t=0;
for(i=0;i<imageWidth;i+=sndCanvasWidth){
for(j=0;j<imageHeight;j+=sndCanvasHeight){
var myImageData = ctx.getImageData(j,i,sndCanvasWidth,sndCanvasHeight);
arrTiles.push(myImageData);
}
}
return arrTiles;
}
}
Now I'm attempting to assign this array to another variable
var newArray = loadTileSet();
console.log(newArray[0]);