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