Question

93

clearRect not working

rated 0 times [ 99] [ 6] / answers: 1 / hits: 18454 / 12 Years ago, fri, march 16, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arthur

Add To Favorites

Follow

Total Points: 729

Total Questions: 107

Total Answers: 109

Location: China

Member since Mon, Aug 22, 2022

2 Years ago

arthur questions

1 Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) rollup vue package

Thu, Sep 2, 21, 00:00, 3 Years ago

1 Formik & Yup: How to validate if the provided date is eighteen years old?

Mon, Oct 19, 20, 00:00, 4 Years ago

1 Angular 9 how to use debouncetime for input change event (keyup)

Thu, Apr 30, 20, 00:00, 4 Years ago

1 Swiper and current page index

Wed, Feb 19, 20, 00:00, 4 Years ago

1 Google Maps API Billing not Enabled Error - Billing not open

Fri, Jan 10, 20, 00:00, 4 Years ago

View All

answered 12 Years ago hailey · Accepted Answer

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.