Estoy creando un juego usando HTML y JavaScript, y he creado recursos para el juego. (archivos PNG)

El problema es que quiero agregar la imagen al lienzo, pero no sabía cómo hacerlo. Así que vi algunos videos de YouTube (alrededor de 5) e intenté hacer lo que hizo la persona en YouTube.

No funcionó. Usé PNG, y el chico de YouTube también usó PNG. Copié su código EXACTO, pero no funciona para MÍ, no para él.

Aquí está mi código (parte de él, porque los demás son simplemente HTMl):

 <script> let canvEl = document.getElementById('game'); let c = canvEl.getContext("2d"); // Draw Sky c.fillStyle = "rgb(22, 203, 235)" c.fillRect(0,0,w,h) // Draw Ground c.drawImage('dirt_block.png', 100, 100, 18, 18); </script>

Luego, después de cargar, todo lo que vi fue azul claro. (Ellos cielo) El bloque de tierra debe ser de color marrón, pero no veo un punto de color marrón en cualquier lugar.

Así que entré en la consola y me mostró un mensaje de error:

game.html:75 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.

Por favor ayuda, porque los errores hacen que me duelan las tripas. jajaja