DEV Community

Cover image for Stuck with draw()
hindrik40
hindrik40

Posted on

Stuck with draw()

I have a problem with the draw function in my tutorial. I'm following a video where I will do a game on canvas. When I made the projectile function/class and tried to draw it on the screen, I failed to show up. I can see it in the console but not on the net. Do anyone 'have a suggestion on what could be wrong. The js code is below. I would appreciate feedback!
Here is the code:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth / 2;
canvas.height = window.innerHeight / 2;

//Klasser
// Klass player
class Player {
constructor(x, y, radius, word, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
this.word = word
}
draw() {
ctx.beginPath()
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
ctx.fillStyle = this.color
ctx.fill()
ctx.strokeStyle = "red"
ctx.stroke()
}
}

class Projectile {
constructor(x, y, radius, color, velocity) {
this.x = x
this.radius = radius
this.color = color
this.velocity = velocity
}
draw() {
ctx.beginPath()
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
ctx.fillStyle = this.color
ctx.fill()
}
}

const x = canvas.width / 2
const y = canvas.height / 2
const player = new Player(x, y, 30, "Hej", "blue", )
player.draw()

//Event listener

addEventListener('click', (event) => {

const projectile = new Projectile(event.clientX,
    event.clientY,
    5, 'red',
    null)

console.log(projectile)
projectile.draw()
Enter fullscreen mode Exit fullscreen mode

});

Top comments (0)