javascript - fillrect - La función clearRect no borra el lienzo

clearrect javascript

Question

Estoy usando este javaScript en la función onmousemove del cuerpo:

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

}

Se supone que debe limpiar el lienzo cada vez que muevo el mouse y dibujar una nueva línea, pero no funciona correctamente. Estoy tratando de resolverlo sin usar jQuery, escuchas del mouse o algo similar.

Aquí está el código:

http://jsfiddle.net/7vx2z/

Answer 1

Debe utilizar " beginPath () ". Eso 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

Pruebe 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