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

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

JS

 const ROW = 10;
    const COLS = 11;
    const SIZE = 64;

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

    //creating tile
    function box() {
        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 map
    var map =[];

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

            }
        }
    }

    //rendering map
    function render() {
        for (var i = 0; i < ROW; i++) {            //For each row

            for (var x = 0; x < COLS; x++) {       //And each column in it
                var tile = map[i][x]; 
                    tile.xaxis *= i;
                    tile.yaxis += (x*SIZE);   //increment y value

                var img = new Image();
                img.onload = (function(x,y) {    //draw when image is loaded
                     return function() {
                        surface.drawImage(this, x, y, 64, 64);
                        }

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

                img.src = tile.src;
            }
        }
    }

    setMap();    //create the grid
    render();    //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 = [];

const ROW = 10;
const COLS = 11;
const SIZE = 64;

const canvas = document.getElementById("canvas");
const surface = canvas.getContext("2d");
const image =  new Image();
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 tile
function Box() { // any function you call with new should start with a capital
    this.xaxis = 56;
    this.yaxis = 0;  // should this not be something other than zero
    this.img = image;
}

//creating map
const map =[];
function setMap() {
    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] = new box();
        }
    }
}

//rendering map
function render() {
    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