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/

Answer 1

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(); }