Почему он не рисует изображение и дает ошибку типа? ⇐ Html

[Anonymous]

Недавно я начал использовать JavaScript для школьного проекта. Прямо сейчас у меня есть плитка, "grass.png". Он полон 32 на 32 плитки, и я хотел бы в конечном итоге создать редактор карт. Для этого мне нужно, чтобы все мои плитки хранили в словаре. Когда я пытаюсь сохранить растровую карту изображения и пытаться нарисовать его, это приводит к ошибке типа. < /P>

Код: Выделить всё

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var tileSize = 32;
var tilex = Math.ceil(canvas.width / tileSize);
var tiley = Math.ceil(canvas.height / tileSize);
var tiles = {};
var images = ['performanceTask Assets/Grass.png', 'performanceTask Assets/Plant.png', 'performanceTask Assets/Stone Ground.png', 'performanceTask Assets/Struct.png', 'performanceTask Assets/Wall.png', 'performanceTask Assets/Props.png', 'performanceTask Assets/Shadow Plant.png', 'performanceTask Assets/Shadow.png', 'performanceTask Assets/player.png'];

var atlasImage = new Image();

atlasImage.src = images[0];
atlasImage.onload = function() {
let x = 0
let y = 0
for (let u = 0; u < 8; u++) {
for (let i = 0; i < 9; i++) {
tiles["tiles" + (i+8*u)] = createImageBitmap(atlasImage, x, y, tileSize, tileSize)
x += tileSize;
}
y += tileSize;
x = 0;
}
}

function grassScreen() {
ctx.drawImage(tiles['tiles1'], 100, 100);
};

setInterval(grassScreen, 1000);< /code>






Work in Progress

* {
overflow: hidden;
}
html, body {
margin: 0 !important;
padding: 0 !important;
}

Подробнее здесь: https://stackoverflow.com/questions/758 ... type-error