clearRect function doesn't clear the canvas

draw, javascript, line, onmousemove

Solution

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

Problem

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/

Original source