Search code examples
javascriptcanvaspong

How can I clear the previous position of the circle in my canvas?

I'm trying to make Pong using canvas with JavaScript.

It has been many years since I made any game, and therefore am quite the beginner.

I have a problem where I am trying to move the ball (just its x position, for now) and trying to remove its previous position. The code I am using worked for the paddle (up and down keys to move it).

But, it doesn't seem to want to work with the ball.

What am I doing wrong?

this.draw = function() {
    ctx.clearRect(this.prevX - this.radius, this.prevY - this.radius, this.radius * 2, this.radius * 2);

    ctx.fillStyle = this.color;
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.fill();

    this.prevX = this.x;
    this.prevY = this.y;
 }

jsFiddle.

I know I am using clearRect(), but I was under the impression it just removes a rectangular portion of the canvas.

clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent

Source.

Feel free to give me any other tips too, as I'm pretty much a beginner with this.

Solution

  • It's actually because you are not calling beginPath, so every new circle you draw also redraws all of the old circles!

    Fix here with illustration:

    http://jsfiddle.net/UvGVb/15/

    Take out the call to beginPath to see what was happening before.