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