clearRect function doesn't clear the canvas

Question

I'm using this script on the body onmousemove function:

function lineDraw() {
    // Get the context and the canvas:
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    // Clear the last canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Draw the line:
    context.moveTo(0, 0);
    context.lineTo(event.clientX, event.clientY);
    context.stroke();
}

It's supposed to clear the canvas each time I move the mouse around, and draw a new line, but it isn't working properly. I'm trying to solve it without using jQuery, mouse listeners or similar.

Here is a demo: https://jsfiddle.net/0y4wf31k/

aaaidan · Accepted Answer · 2017-08-14 04:26:13Z

109

You should use "beginPath()". That is it.

function lineDraw() {   
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    context.clearRect(0, 0, context.width,context.height);
    context.beginPath();//ADD THIS LINE!<<<<<<<<<<<<<
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();
}

edited Aug 14, 2017 at 4:26

aaaidan

7,3868 gold badges69 silver badges107 bronze badges

answered Apr 16, 2013 at 11:12

aviomaksim

2,6271 gold badge24 silver badges14 bronze badges

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

4 Comments

MetalGodwin Over a year ago

Would like to add that this goes for draw methods such as rect and arc as well.

Kaiido Over a year ago

It's old but... closePath is useless and misleading here, it's just a lineTo(previousStartingPointOfThePath) so for a single line, it won't do anything, and it doesn't tell at all that you finished your path declaration.

aaaidan Over a year ago

Thanks @kaiido, I edited the question. I think the edit is in the spirit of the answer. Hope you don't mind aviomaksim

John Henckel Over a year ago

Thank you! that is crazy, why does the clear fail unless you do a beginPath? it makes no sense.

David Edwards · Accepted Answer · 2019-02-22 16:09:08Z

9

Be advised that ctx.clearRect() does not work properly on Google Chrome. I spent hours trying to solve a related problem, only to find that on Chrome, instead of filling the rectangle with rgba(0, 0, 0, 0), it actually fills the rectangle with rgba(0, 0, 0, 1) instead!

Consequently, in order to have the rectangle filled properly with the required transparent black pixels, you need, on Chrome, to do this instead:

ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(left, top, width, height);

This should, of course, work on all browsers providing proper support for the HTML5 Canvas object.

edited Feb 22, 2019 at 16:09

answered Feb 22, 2019 at 16:00

David Edwards

8641 gold badge10 silver badges13 bronze badges

Comments

user10803259 · Accepted Answer · 2020-12-22 01:33:19Z

4

And beginPath() and stroke() we need to use. This code works same as clearRect(...)

ctx.beginPath();
ctx.fillStyle = "rgba(0, 0, 0, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);    
ctx.stroke();

answered Dec 22, 2020 at 1:33

user10803259

413 bronze badges

1 Comment

B''H Bi'ezras -- Boruch Hashem Over a year ago

why do we need this? what if one has a colored background?

Moritz Ringler · Accepted Answer · 2023-02-17 13:56:54Z

0

If you're getting a blacked out screen using this method

ctx.beginPath()
ctx.fillStyle = "rgba(0, 0, 0, 255)"
ctx.fillRect(0, 0, canvas.width, canvas.height)    
ctx.stroke();

then switch all the 0's in rgba to 255

ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);    
ctx.stroke();

edited Feb 17, 2023 at 13:56

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

answered Feb 14, 2023 at 19:13

SCREENSABER

1

Comments

salih0vicX · Accepted Answer · 2012-11-17 23:54:33Z

-4

Try with context.canvas.width = context.canvas.width:

function lineDraw() {   
    var canvas=document.getElementById("myCanvas");
    var context=canvas.getContext("2d");
    //context.clearRect(0, 0, context.width,context.height);
    context.canvas.width = context.canvas.width;
    context.moveTo(0,0);
    context.lineTo(event.clientX,event.clientY);
    context.stroke();
}

Demo HERE

answered Nov 17, 2012 at 23:54

salih0vicX

1,3831 gold badge8 silver badges9 bronze badges

1 Comment

Sani Huttunen Over a year ago

or simply myCanvas.width = myCanvas.width;.

Collectives™ on Stack Overflow

clearRect function doesn't clear the canvas

5 Answers 5

4 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related