функция clearRect не очищает холст

я использую этот javaScript для функции body 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();

}

он должен очищать холст каждый раз, когда я перемещаю мышь и рисую новую линию, но он не работает должным образом. Я пытаюсь решить его без использования jQuery, прослушивателей мыши или подобных.

вот код:

http://jsfiddle.net/7vx2z/

16
clear draw javascript line onmousemove

2 ответов

вы должны использовать "beginPath()". Вот и все.

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

попробовать 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();
}

демо здесь

-1