52

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/

braX
  • 11,506
  • 5
  • 20
  • 33
Carlos Roldán
  • 902
  • 1
  • 9
  • 19

5 Answers5

104

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();
}
aaaidan
  • 7,093
  • 8
  • 66
  • 102
aviomaksim
  • 2,577
  • 1
  • 22
  • 14
  • 3
    Would like to add that this goes for draw methods such as rect and arc as well. – MetalGodwin Jan 14 '17 at 13:13
  • 2
    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. – Kaiido Apr 02 '17 at 02:48
  • Thanks @kaiido, I edited the question. I think the edit is in the spirit of the answer. Hope you don't mind aviomaksim – aaaidan Aug 14 '17 at 04:27
  • 4
    Thank you! that is crazy, why does the clear fail unless you do a `beginPath`? it makes no sense. – John Henckel Aug 23 '19 at 18:18
8

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.

David Edwards
  • 794
  • 8
  • 13
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();
user10803259
  • 41
  • 3
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();
Moritz Ringler
  • 9,772
  • 9
  • 21
  • 34
SCREENSABER
  • 1
-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

salih0vicX
  • 1,363
  • 1
  • 8
  • 9