clearRect does not clear the canvas

Question

I am trying to draw rectangle in canvas, users click on spot and moves the mouse, the rectangle will be drawn and when its done only one rectangle remanins, the alst one. However using

let canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d");
canvas.addEventListener("mousedown",function(event){
    x_ = event.pageX - this.offsetLeft;
    y_ = event.pageY - this.offsetTop;  
    canvas.addEventListener("mousemove",function(event){
        xmax = event.pageX - this.offsetLeft;
        ymax = event.pageY - this.offsetTop;
        console.log(x_,y_,xmax,ymax);
        ctx.clearRect(0,0,canvas.width,canvas.height)
        ctx.fillRect(0, 0, 10, 10);
        ctx.rect(x_,y_,xmax-x_,ymax-y_);
        ctx.stroke()
    })
})

canvas {
border: 1px solid black;
}

<canvas></canvas>

Fiddle

The clearRect call does not work, as the previous rectangles remain visible.

There is no reason for it not to work, why does it behaves in such way? After clearing the rectangle, the new image is drawn, and all previous rectangles should go away.

I see you're calling stroke() at the end. Check the "Usage notes" section here: developer.mozilla.org/en-US/docs/Web/API/… — Máté Safranka
– Máté Safranka, Commented Mar 28, 2018 at 14:46
Possible duplicate of clearRect does not clear the canvas when drawing vertical lines — Andreas
– Andreas, Commented Mar 28, 2018 at 14:53

Máté Safranka · Accepted Answer · 2018-03-28 14:51:39Z

3

I see you're calling stroke() at the end, that might be the problem. Check the "Usage Notes" here:

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect

A common problem with clearRect is that it may appear it does not work when not using paths properly. Don't forget to call beginPath() before starting to draw the new frame after calling clearRect.

answered Mar 28, 2018 at 14:51

Máté Safranka

4,1161 gold badge12 silver badges22 bronze badges

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

Comments

fehrmann · Accepted Answer · 2018-03-28 14:52:29Z

2

Try: Using beginPath() after calling clearRect().

    [...]
    console.log(x_,y_,xmax,ymax);
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.fillRect(0, 0, 10, 10);
    [...]

answered Mar 28, 2018 at 14:52

fehrmann

793 bronze badges

Comments

zfrisch · Accepted Answer · 2018-03-28 14:54:45Z

Add an object to maintain state. Your code is just stacking event listeners and creating a singular shape. We use context.beginPath() to advise of a new shape.

let canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"),
mouse = { 
mousedown: false,
x: 0,
y: 0
}
canvas.addEventListener("mousedown",function(event){
    mouse.x = event.pageX - this.offsetLeft;
    mouse.y = event.pageY - this.offsetTop;  
    mouse.mousedown = true;
})
canvas.addEventListener("mouseup mouseleave",function(event){

    mouse.mousedown = false;
})
    canvas.addEventListener("mousemove",function(event){
        xmax = event.pageX - this.offsetLeft;
        ymax = event.pageY - this.offsetTop;

        ctx.clearRect(0,0,canvas.width,canvas.height)
        
        if(mouse.mousedown) {
        ctx.fillRect(0, 0, 10, 10);
        ctx.beginPath();
        ctx.rect(mouse.x, mouse.y, xmax-mouse.x,ymax-mouse.y);
        ctx.stroke()
        }
    })

canvas {
border: 1px solid black;
}

<canvas></canvas>

Collectives™ on Stack Overflow

clearRect does not clear the canvas

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related