funkcja clearRect nie czyści płótno

Question

Używam tego JavaScript w organizmie onmousemove funkcji:

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

} 

To ma jasne płótno za każdym razem, poruszam myszką dookoła i narysować nową linię, ale nie działa poprawnie. Próbuję go rozwiązać bez użycia jQuery, myszy lub podobnych.

Oto kod:

http://jsfiddle.net/7vx2z/

Answer 1

należy użyć "beginPath()". To jest to.

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

Spróbuj z 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