No image width, canvas / constructor javascript / game

Question

Hello everyone this is my problem :

I am currently creating a game following a tutorial, but I have a problem in my constructor.

I'm using a constructor to draw some platform. I'm trying to draw an image on my platform but it doesnt work.

The image appears but not its width (things I need to have to make the project works correctly). But after a reload, the width is correct, and the project is working.

So I assume that I have to declare my image somewhere (maybe with an onload) but I tried a lot of things without it ever working.

So as you can see, on the first load, I have no width : 0 width

But, if I hits reload, there it is : 580 width

As I said, I already tried :

window.onload

image.onload

img.addEventListener('load', function() {})

But I maybe tried wrong..

Im someone had an idea for me...

Thanks in advance and sorry for my english

Here is my code :

    import platform from '../images/platform.png'
    
    console.log(platform)
    const getCanvas = document.querySelector('canvas');
    const canvas = getCanvas.getContext('2d');
    
    getCanvas.width = window.innerWidth;
    getCanvas.height = window.innerHeight;
    
    const gravity = 0.5
    
    class Player {
      constructor() {
        this.position = {
          x: 100,
          y: 100
        }
        this.velocity = {
          x: 0,
          y: 0
        }
    
        this.width = 30
        this.height = 30
      }
    
      draw() {
        canvas.fillStyle = 'red';
        canvas.fillRect(this.position.x, this.position.y, this.width, this.height);
      }
    
      update() {
        this.draw()
        this.position.x += this.velocity.x
        this.position.y += this.velocity.y
    
        if (this.position.y + this.height + this.velocity.y <= getCanvas.height)
          this.velocity.y += gravity
        else this.velocity.y = 0
      }
    }
    
    class Platform {
      constructor({ x, y, image }) {
        this.position = {
          x: x,
          y: y
        }
    
    
        this.image = image
        this.width = image.width
        this.height = image.height
      }
    
      draw() {
        canvas.drawImage(this.image, this.position.x, this.position.y)
      }
    }
    
    const image = new Image()
    image.src = platform
    
    
    const player = new Player()
    const platforms = [new Platform({
      x: 200,
      y: 100,
      image: image
    }), new Platform({
      x: 500, y: 200, image: image
    })]
    
    const keys = {
      right: {
        pressed: false
      },
      left: {
        pressed: false
      }
    }
    
    let scrollOffset = 0
    
    function animate() {
      requestAnimationFrame(animate)
      canvas.clearRect(0, 0, getCanvas.width, getCanvas.height)
      platforms.forEach((platform) => {
        platform.draw()
      })
      player.update()
    
      if (keys.right.pressed && player.position.x < 400) {
        player.velocity.x = 5
      } else if (keys.left.pressed && player.position.x > 100) {
        player.velocity.x = -5
      } else {
        player.velocity.x = 0
    
        if (keys.right.pressed) {
          scrollOffset += 5
          platforms.forEach((platform) => {
            platform.position.x -= 5
          })
    
        } else if (keys.left.pressed) {
          scrollOffset = - 5
          platforms.forEach((platform) => {
            platform.position.x += 5
          })
    
        }
      }
    
      platforms.forEach((platform) => {
        if (player.position.y + player.height <= platform.position.y && player.position.y + player.height + player.velocity.y >= platform.position.y && player.position.x + player.width >= platform.position.x && player.position.x <= platform.position.x + platform.width) {
          player.velocity.y = 0
        }
      })
    
      if (scrollOffset > 2000) {
        console.log("gg")
      }
    }
    
    animate()
    
    addEventListener('keydown', ({ key }) => {
    
      switch (key) {
        case 'z':
          player.velocity.y -= 15
          break
    
        case 'q':
          keys.left.pressed = true;
          break
    
        case 's':
          break
    
        case 'd':
          keys.right.pressed = true;
          break
      }
    })
    
    addEventListener('keyup', ({ key }) => {
    
      switch (key) {
        case 'z':
          break
    
        case 'q':
          keys.left.pressed = false;
          break
    
        case 's':
          break
    
        case 'd':
          keys.right.pressed = false;
          break
      }
    })