clearRect not working

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.

Answer 2

window.onload = function() {

var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');


var cvsW = cvs.Width;
var cvsH = cvs.Height;

var snakeW = 10;
var snakeH = 10;



function drawSnake(x, y) {

    ctx.fillStyle = '#FFF';
    ctx.fillRect(x*snakeW, y * snakeH, snakeW, snakeH);


    ctx.fillStyle = '#000';
    ctx.strokeRect(x*snakeW, y * snakeH, snakeW, snakeH);
}


// drawSnake(4, 5)

//create our snake object, it will contain 4 cells in default

var len = 4;
var snake = [];

for(var i = len -1; i >=0; i--) {

    snake.push(
        {
            x: i,
            y: 0
        }
    )
};


function draw() {
    ctx.clearRect(0, 0, cvsW, cvsH)
    for(var i = 0; i < snake.length; i++) {
        var x = snake[i].x;
        var y = snake[i].y;

    
        drawSnake(x, y)
    }

    


//snake head

var snakeX = snake[0].x;
var snakeY = snake[0].y;

//remove to last entry (the snake Tail);

snake.pop();

// //create a new head, based on the previous head and the direction;

snakeX++;


let newHead = {

    x: snakeX,
    y: snakeY
}



snake.unshift(newHead)

}

setInterval(draw, 60);

}

my clearRect is not working, what's the problem and solution?