funzione clearRect non cancella la tela

Question

Sto usando questo JavaScript sul corpo onMouseMove funzione di:

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

} 

Si suppone per cancellare la tela ogni volta che muovo il mouse, e disegnare una nuova linea, ma non funziona correttamente. Sto provando a risolverlo senza usare jQuery, ascoltatori di mouse o simili.

Ecco il codice:

http://jsfiddle.net/7vx2z/

Answer 1

Si dovrebbe usare "BeginPath()". È così.

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

Prova con 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