Как очистить холст для перерисовки

использование: context.clearRect(0, 0, canvas.width, canvas.height);

это самый быстрый и самый наглядный способ очистить весь холст.

не использовать: canvas.width = canvas.width;

сброс canvas.width сбрасывает все состояние холста (например, преобразования, ширина линии, strokeStyle и т. д.), это очень медленно (по сравнению с clearRect), он не работает во всех браузерах, и он не описывает то, что вы на самом деле пытаетесь сделать.

работа с преобразованными координатами

если у вас есть модифицированная матрица преобразования (например, с помощью scale,rotate или translate) то context.clearRect(0,0,canvas.width,canvas.height) скорее всего, не будет очищать всю видимую часть холста.

решение? Сброс матрицы преобразования перед очисткой холста:

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

Edit: Я только что сделал некоторые профилирования и (в Chrome) это около 10% быстрее, чтобы очистить 300x150 (размер по умолчанию) холст без сброса преобразования. По мере увеличения размера вашего холста это разница падает.

это уже относительно незначительно, но в большинстве случаев вы будете рисовать значительно больше, чем вы очищаете, и я считаю, что эта разница в производительности не имеет значения.

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

Если вы рисуете линии, убедитесь, что вы не забыли:

context.beginPath();

в противном случае строки не будут очищены.

другие уже сделали отличную работу, отвечая на вопрос, а если простой clear() метод на объекте контекста был бы полезен для вас (это было для меня), это реализация, которую я использую на основе ответов здесь:

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
    }           
};

использование:

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

• Chrome хорошо реагирует на: context.clearRect ( x , y , w , h ); как было предложено @Pentium10, но IE9, похоже, полностью игнорирует эту инструкцию.
• IE9, кажется, отвечает: canvas.width = canvas.width; но он не очищает линии, только формы, изображения и другие объекты, если вы также не используете решение @John Allsopp о первом изменении ширины.

Итак, если у вас есть холст и контекст, созданный следующим образом:

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

вы можете использовать такой метод:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

используйте метод clearRect, передавая координаты x,y и высоту и ширину холста. Метода clearrect будет очистить весь холст, как :

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

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

это легко. предположим, что ваш цвет фона белый:

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

Это 2018 год и до сих пор нет собственного метода, чтобы полностью очистить холст для перерисовки. clearRect()тут не очистить холст полностью. Чертежи без заливки не очищаются (например. rect())

1.To полностью очистить холст независимо от того, как вы рисуете:

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();

плюсы: сохраняет strokeStyle, fillStyle и др.; Нет отставания;

минусы: ненужно, если вы уже используете beginPath перед рисованием все что угодно

2.Используя ширину / высоту hack:

context.canvas.width = context.canvas.width;

или

context.canvas.height = context.canvas.height;

плюсы: работает с IE Минусы: сброс strokeStyle, fillStyle до Черного; Laggy;

мне было интересно, почему решения не существует. Вообще-то,clearRect() рассматривается как единое решение, потому что большинство пользователей делать beginPath() прежде чем делать какие-то новые пути. Хотя beginPath используется только при рисовании линий, а не закрытого пути, как rect().

это причина, по которой принятый ответ не решил мою проблему, и я в конечном итоге тратить часы, пытаясь различные хаки. Проклинаю тебя Мозилла

в webkit вам нужно установить ширину в другое значение, а затем вы можете установить его обратно в исходное значение

Я обнаружил, что во всех браузерах, которые я тестирую, самый быстрый способ-это на самом деле fillRect с белым или любым другим цветом, который вы хотели бы. У меня очень большой монитор, и в полноэкранном режиме clearRect мучительно медленный, но fillRect является разумным.

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

недостатком является то, что холст больше не прозрачен.

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

это работало для моего pieChart в диаграмме.js

<div class="pie_nut" id="pieChartContainer">
    <canvas id="pieChart" height="5" width="6"></canvas> 
</div>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

быстрый способ сделать

canvas.width = canvas.width

Idk как это работает, но это так!

быстрый способ:

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

Это то, что я использую, независимо от границ и преобразования матриц:

function clearCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.globalCompositeOperation = 'copy';
  ctx.strokeStyle = 'transparent';
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

в основном, это сохраняет текущее состояние контекста, и рисует прозрачный пиксель с copy как globalCompositeOperation. Затем восстанавливает предыдущее состояние контекста.

простой, но не очень читаемый способ, чтобы написать это:

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

context.clearRect(0,0,w,h)   

заполните данный прямоугольник значениями RGBA:
0 0 0 0 : хром
0 0 0 255: с FF & Safari

но

context.clearRect(0,0,w,h);    
context.fillStyle = 'rgba(0,0,0,1)';  
context.fillRect(0,0,w,h);  

пусть прямоугольник заполнен
0 0 0 255
независимо от браузера !

Если вы используете clearRect только, если у вас есть его в форме для отправки чертежа, вы получите отправить вместо очистки, или, может быть, он может быть очищен сначала, а затем загрузить пустой чертеж, так что вам нужно будет добавить preventDefault в начале функции:

   function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

надеюсь, что это поможет кому-то.

Context.clearRect(starting width, starting height, ending width, ending height);

пример: context.clearRect(0, 0, canvas.width, canvas.height);

Это все отличные примеры того, как вы очищаете стандартный холст, но если вы используете paperjs, то это будет работать:

определите глобальную переменную в JavaScript:

var clearCanvas = false;

из вашего PaperScript определите:

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

теперь везде, где вы установите clearCanvas в true, он очистит все элементы с экрана.