La fonction clearRect n'efface pas la toile

Je suis en utilisant ce code javaScript sur le corps de la fonction onmousemove:

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

}

Il est censé effacer la zone à chaque fois que je bouge la souris autour de, et de tracer une nouvelle ligne, mais il ne fonctionne pas correctement.
Je suis en train de le résoudre sans l'aide de jQuery, la souris auditeurs ou similaire.

Voici le code:

http://jsfiddle.net/7vx2z/

source d'informationauteur Juan Carlos

  1. 30

    Vous devez utiliser "beginPath()". Qui est-il.

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

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

    Démo ICI