Question

I’m doing a Pong game in javascript in order to learn making games, and I want to make it object oriented.

I can’t get clearRect to work. All it does is draw a line that grows longer.
Here is the relevant code:

function Ball(){
    this.radius = 5;
    this.Y = 20;
    this.X = 25;
    this.draw = function() {
        ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true);
        ctx.fillStyle = '#00ff00';
        ctx.fill();
    };
}

var ball = new Ball();

function draw(){
    player.draw();
    ball.draw();
}

function update(){
    ctx.clearRect(0, 0, 800, 400);
    draw();
    ball.X++;
}

I’ve tried to put the ctx.clearRect part in the draw() and ball.draw() functions and it doesn’t work.
I also tried fillRect with white but it gives the same results.
How can I fix this?

Answer 1

Your real problem is you are not closing your circle’s path.

Add ctx.beginPath() before you draw the circle.

jsFiddle.

Also, some tips…

• Your assets should not be responsible for drawing themselves (their draw() method). Instead, perhaps define their visual properties (is it a circle? radius?) and let your main render function handle canvas specific drawing (this also has the advantage that you can switch your renderer to regular DOM elements or WebGL further down the track easily).
• Instead of setInterval(), use requestAnimationFrame(). Support is not that great at the moment so you may want to shim its functionality with setInterval() or the recursive setTimeout() pattern.
• Your clearRect() should be passed the dimensions from the canvas element (or have them defined somewhere). Including them in your rendering functions is akin to magic numbers and could lead to a maintenance issue further down the track.