JSFiddle - React, Tailwind, and code Playground

by Sebastien

HTML

<canvas id="canvas" width="1000" height="1000"></canvas>

JavaScript

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";
}

//creating map
var map =[];

function setMap() {
    for (var i = 0; i < ROW; i++) {
		var arr = [];
		map.push(arr);
        for (var o = 0; o < COLS; o++) {
			var arr2 = [];
            map[i].push(new box());

        }
    }
}

//rendering map
function render() {
    for (var i = 0; i < ROW; i++) {
	
        for (var x = 0; x < COLS; x++) {
            var tile = map[i][x];
				tile.xaxis *= i;
				tile.yaxis += (x*SIZE);
				
			var img = new Image();
			img.onload = (function(x,y) {
				 return function() {
					surface.drawImage(this, x, y, 64, 64);
					}

			})(tile.xaxis, tile.yaxis);
			
			img.src = tile.src;
        }
    }
}

setMap();
render();