Javascript Uncaught type error unable to read properties to draw

Question

I am working on a java script and html game but keep getting the error:

index.js:20 Uncaught TypeError: Cannot read properties of undefined (reading 'x')
    at Sprite.draw (index.js:20:40)
    at animate (index.js:47:13)

My console on chrome is getting spammed with error messages and I am unsure of what to do. I have looked throught the code numerous times and found nothing. The problem is apparently a type error that stops my code from drawing on the canvas. If you need more specification comment I'll be right here ready to answer. I hope you guys can help. The code:

const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = 1024;
canvas.height = 576;
c.fillStyle = 'white'
c.fillRect(0, 0, canvas.width, canvas.height)
const image = new Image()
image.src = './img/kazimon-map.png'
const playerImage = new Image()
playerImage.src ='./img/playerDown.png'

class Sprite {
    constructor({
        positon, velocity, image
    }) {
        this.position = positon
        this.image = image
    }
    draw() {
        c.drawImage(this.image, this.positon.x, this.postion.y)
    }
}
const background = new Sprite({
    postion: {
        x:-300,
        y:-450
    },
    image: image
})
const keys = {
    w: {
        pressed: false
    },
    a: {
        pressed: false
    },
    s: {
        pressed: false
    },
    d: {
        pressed: false
    }
}

function animate() {
    window.requestAnimationFrame(animate)
    background.draw()
    c.drawImage(
        playerImage,
        0,
        0,
        playerImage.width / 4,
        playerImage.height,
        canvas.width / 2 - (playerImage.width / 4) /2,
        canvas.height / 2 - playerImage.height / 2,
        playerImage.width / 4,
        playerImage.height,
        )
    if (keys.w.pressed) {
        background.positon.y = background.positon.y - 3
    }
}
animate()
window.addEventListener('keydown', (e) => {
    switch (e.key) {
        case 'w':
            keys.w.pressed = true
            console.log(keys.s.pressed)
            break
        case 'a':
            keys.a.pressed = true
            console.log(keys.s.pressed)
            break
        case 's':
            keys.s.pressed = true
            console.log(keys.s.pressed)
            break
        case 'd':
            keys.d.pressed = true
            console.log(keys.s.pressed)
            break
        console.log(keys)
    }
})

Thanks in advance

Answer 1

Basically you should correct your spelling or just be consistent. I went with position.

const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = 400;
canvas.height = 250;
c.fillStyle = 'white'
c.fillRect(0, 0, canvas.width, canvas.height)
const image = new Image()
image.src = 'https://picsum.photos/400/250'
const playerImage = new Image()
playerImage.src = 'https://picsum.photos/50'

class Sprite {
  constructor({
    position,
    velocity,
    image
  }) {
    console.log(position)
    this.position = position
    this.image = image
  }
  draw() {
    c.drawImage(this.image, this.position.x, this.position.y)
  }
}
const background = new Sprite({
  position: {
    x: -300,
    y: -450
  },
  image: image
})

const keys = {
  w: {
    pressed: false
  },
  a: {
    pressed: false
  },
  s: {
    pressed: false
  },
  d: {
    pressed: false
  }
}

function animate() {
  window.requestAnimationFrame(animate)
  background.draw()
  c.drawImage(
    playerImage,
    0,
    0,
    playerImage.width / 4,
    playerImage.height,
    canvas.width / 2 - (playerImage.width / 4) / 2,
    canvas.height / 2 - playerImage.height / 2,
    playerImage.width / 4,
    playerImage.height,
  )
  if (keys.w.pressed) {
    background.position.y = background.position.y - 3
  }
}
animate()
window.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'w':
      keys.w.pressed = true
      console.log(keys.s.pressed)
      break
    case 'a':
      keys.a.pressed = true
      console.log(keys.s.pressed)
      break
    case 's':
      keys.s.pressed = true
      console.log(keys.s.pressed)
      break
    case 'd':
      keys.d.pressed = true
      console.log(keys.s.pressed)
      break
  }
})

<canvas></canvas>