Why isn't my canvas clearRect working?

Question

I set up an interval:

tick = setInterval(function(){
    render();
}, 1000 / 25)

Then each render() I clear rect and expect to see a dot travel across the screen.

function render() {

    ctx.clearRect(0, 0, 1000, 1000);

    circle(sprite.x, sprite.y, sprite.r);

    for (var i = 0; i < animations.length; i++) {
        var s = animations[i];
        if( s.target ){
            Engine.Animate(s);
        }
    }
}

But for some reason, I'm ending up drawing every single position of the dot, rather than just one.

Example: https://jsfiddle.net/yvmbsjj1/1/

user5627351 · Accepted Answer · 2016-05-21 13:01:11Z

4

You need to tell the canvas context that you are starting a path, and then your clearRect will work. Use the beginPath() method to do this.

function render() {
        ctx.beginPath(); // This is needed 

        ctx.clearRect(0, 0, 1000, 1000);

        circle(sprite.x, sprite.y, sprite.r);

        for (var i = 0; i < animations.length; i++) {
            var s = animations[i];
            if( s.target ){
                Engine.Animate(s);
            }
        }
    }

This is needed when drawing lines, arcs, circles, rectangles, etc... And should be called every time you render, to initialize a new path.

answered May 21, 2016 at 13:01

user5627351

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why isn't my canvas clearRect working?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related