Функция clearRect не очищает полотно

Я использую этот скрипт для функции 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, слушателей мыши или чего-либо подобного.

Вот демоверсия: https://jsfiddle.net/0y4wf31k/

Ответы

Ответ 1

Вы должны использовать " 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();
}

Ответ 2

Имейте в виду, что ctx.clearRect() не работает должным образом в Google Chrome. Я провел часы, пытаясь решить проблему, связанную, только чтобы обнаружить, что на Chrome, вместо того, чтобы заполнить прямоугольник с RGBA (0, 0, 0, 0), то на самом деле заполняет прямоугольник с RGBA (0, 0, 0, 1) вместо!

Следовательно, для правильного заполнения прямоугольника необходимыми прозрачными черными пикселями в Chrome необходимо сделать следующее:

ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(left, top, width, height);

Это, конечно, должно работать во всех браузерах, обеспечивая надлежащую поддержку объекта HTML5 Canvas.

Ответ 3

Просто удалите чертов холст и воссоздайте его.

Ответ 4

Попробуйте с 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();
}

Демо ЗДЕСЬ