html5 canvas referencing images are not showing up

I'm recreating a game based on the FreeSki Windows 95 app. I know my way around JavaScript but i'm stuck on something I thought would be simple. Based on the console.log. I'm referencing the image(s) correctly however they are not displaying. I'm also moving the images randomly and I feel that I may be referencing the images at the wrong point in the flow.

Anyway, here's a codepen of where I'm at: Codepen version with working rect shapes

What I want to do is replace the shapes with images

constructor(x, y, w, h, speed) { this.x = x; this.y = y; this.w = 50; this.h = 50; this.speed = 2; this.img = new Image(); this.img.src = "https://assets.codepen.io/1695918/tree.png"; this.trees = []; this.numberOfTrees = 12; } this.img.onload = () => { try { ctx.drawImage( this.img, this.x, this.y, this.width, this.height, this.sX, this.sY, this.sWidth, this.sHeight); } catch (err) { console.error("Error drawing image:", err); } };