Can I Not Use An Object In An Object For Drawimage()?

I can't seem to figure out why my code doesn't work. What I'm essentially trying to do is generate a 10x10 tile based map using arrays. The idea is to create an object called Box

Solution 1:

Adding a few elements you forgot, here's how I would do it.

Fiddle

HTML

<canvasid="canvas"width="1000"height="1000"></canvas><!-- set canvas size -->

JS

constROW = 10;
    constCOLS = 11;
    constSIZE = 64;

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

    //creating tilefunctionbox() {
        this.xaxis = 56;
        this.yaxis = 0;
        this.src = "https://cdn4.iconfinder.com/data/icons/video-game-adicts/1024/videogame_icons-01-128.png";   //save path to image
    }

    //creating mapvar map =[];

    functionsetMap() {
        for (var i = 0; i < ROW; i++) {
            var arr = [];    //make new row
            map.push(arr);   //push new rowfor (var o = 0; o < COLS; o++) {
                map[i].push(newbox());    //make and push new column element in current row

            }
        }
    }

    //rendering mapfunctionrender() {
        for (var i = 0; i < ROW; i++) {            //For each rowfor (var x = 0; x < COLS; x++) {       //And each column in itvar tile = map[i][x]; 
                    tile.xaxis *= i;
                    tile.yaxis += (x*SIZE);   //increment y valuevar img = newImage();
                img.onload = (function(x,y) {    //draw when image is loadedreturnfunction() {
                        surface.drawImage(this, x, y, 64, 64);
                        }

                })(tile.xaxis, tile.yaxis);

                img.src = tile.src;
            }
        }
    }

    setMap();    //create the gridrender();    //render the grid

Solution 2:

There are a number of errors in your code.

First you are loading the same image 110 times. Load it once and that will save a lot of memory and time.

You create a single dimetioned array map

map = [];

Then attempt to access to as a two dim map. map[i][o] that will not work. You need to create a new array for each row.

You create the function to populate the map setMap() but you never call the function.

The Boxes you create have the yaxis value set to 0. When you call render and multiply it by the column index the result will be zero, so you will only see one column of images. You need to set the yaxis value to some value (64)

Below is your code fixed up with some comments. I left the zero yaxis value as maybe that is what you wanted. The image is created only once and the onload event is used to call render When setMap is called I add a new array for each row. I call setMap at the bottom but can be called anytime after you declare and define var map = [];

constROW = 10;
constCOLS = 11;
constSIZE = 64;

const canvas = document.getElementById("canvas");
const surface = canvas.getContext("2d");
const image =  newImage();
image.src = "box_image.png";
// onload will not fire until all the immediate code has finished running
image.onload = function(){render()};  // call render when the image has loaded//creating tilefunctionBox() { // any function you call with new should start with a capitalthis.xaxis = 56;
    this.yaxis = 0;  // should this not be something other than zerothis.img = image;
}

//creating mapconst map =[];
functionsetMap() {
    for (var i = 0; i < ROW; i++) {
        var row = []; // new array for this row
        map[i] = row;
        for (var o = 0; o < COLS; o++) {            
            row[o] = newbox();
        }
    }
}

//rendering mapfunctionrender() {
    for (var i = 0; i < map.length; i++) {
        for (var x = 0; x < map[i].length; x++) {  // you had map.length you needed the array for row i which is map[i]var tile = map[i][x];
            tile.xaxis *= i;
            tile.yaxis *= x;  // Note you have zero for yaxis?? 0 times anything is zero

            surface.drawImage(tile.img, tile.xaxis, tile.yaxis, 64, 64);

        }
    }
}

setMap(); // create the map