clearRect Funktion löscht nicht die Leinwand

Question

Ich verwende dieses javaScript auf dem Körper onmousemove Funktion:

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

} 

Es soll die Leinwand jedes Mal, wenn ich die Maus bewegen, löschen und eine neue Linie zeichnen, aber es funktioniert nicht richtig. Ich versuche es zu lösen, ohne jQuery, Maushörer oder ähnliches zu verwenden. Hier

ist der Code:

http://jsfiddle.net/7vx2z/

Answer 1

sollten Sie verwenden "beginPath()". Das ist es.

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

Answer 2

Versuchen mit 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