I am creating a game using HTML and JavaScript, and I've created assets for the game. (PNG files)

The problem is, I want to add the image onto the canvas, but I didn't know how. So I watched some YouTube Videos (about 5) and tried to do what the person on YouTube did.

Didn't work. I used PNG, and the guy on YouTube also used PNG. I copied his EXACT code, but it doesn't work for ME, not him.

Here is my code (part of it, because the others are just plain 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>

Then, after I loaded, all I saw was plain blue. (They sky) The dirt block should be brown, but I don't spot a dot of brown anywhere.

So I went into the console, and it displayed an error message:

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)'.

Please help, because errors make my guts hurt. lol