Como limpar a tela para redesenhar

Depois de experimentar operações compostas e desenhar imagens na tela, agora estou tentando remover imagens e composição. Como eu faço isso?

Preciso limpar a tela para redesenhar outras imagens; isso pode continuar por um tempo, então não acho que desenhar um novo retângulo toda vez seja a opção mais eficiente.

const context = canvas.getContext('2d');

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

Usar: context.clearRect(0, 0, canvas.width, canvas.height);

Essa é a maneira mais rápida e descritiva de limpar a tela inteira.

Não use: canvas.width = canvas.width;

A redefinição canvas.widthredefine todo o estado da tela (por exemplo, transformações, lineWidth, strokeStyle etc.), é muito lento (comparado ao clearRect), não funciona em todos os navegadores e não descreve o que você está realmente tentando fazer.

Lidando com coordenadas transformadas

Se você modificou a matriz de transformação (por exemplo scale, usando,, rotateou translate), context.clearRect(0,0,canvas.width,canvas.height)provavelmente não limpará toda a parte visível da tela.

A solução? Redefina a matriz de transformação antes de limpar a tela:

// 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: Acabei de fazer alguns perfis e (no Chrome) é 10% mais rápido para limpar uma tela de 300 x 150 (tamanho padrão) sem redefinir a transformação. À medida que o tamanho da sua tela aumenta, essa diferença diminui.

Isso já é relativamente insignificante, mas na maioria dos casos você estará atraindo consideravelmente mais do que está limpando e acredito que essa diferença de desempenho seja irrelevante.

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

Se você estiver desenhando linhas, não se esqueça:

context.beginPath();

Caso contrário, as linhas não serão limpas.

Outros já fizeram um excelente trabalho respondendo à pergunta, mas se um clear()método simples no objeto de contexto seria útil para você (era para mim), esta é a implementação que utilizo com base nas respostas aqui:

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

Uso:

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
};

• O Chrome responde bem a: context.clearRect ( x , y , w , h );como sugerido por @ Pentium10, mas o IE9 parece ignorar completamente esta instrução.
• O IE9 parece responder: canvas.width = canvas.width;mas não apaga linhas, apenas formas, figuras e outros objetos, a menos que você também use a solução de @John Allsopp para alterar primeiro a largura.

Portanto, se você tiver uma tela e um contexto criados assim:

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

Você pode usar um método como este:

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

Estamos em 2018 e ainda não existe um método nativo para limpar completamente a tela para redesenho. clearRect() não limpa a tela completamente. Desenhos do tipo sem preenchimento não são limpos (por exemplo, rect())

1.Para limpar completamente a tela, independentemente de como você desenha:

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

Prós: preserva strokeStyle, fillStyle etc .; Sem atraso;

Contras: desnecessário se você já estiver usando beginPath antes de desenhar qualquer coisa

2. Usando o corte de largura / altura:

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

OU

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

Prós: Funciona com o IE Contras: Redefine strokeStyle, fillStyle para preto; Laggy;

Fiquei me perguntando por que uma solução nativa não existe. Na verdade, clearRect()é considerada a solução de linha única porque a maioria dos usuáriosbeginPath() antes de desenhar qualquer novo caminho. Embora o beginPath seja usado apenas ao desenhar linhas e não como caminho fechado,rect().

Essa é a razão pela qual a resposta aceita não resolveu meu problema e acabei perdendo horas tentando diferentes hacks. Maldito mozilla

Use o método clearRect passando coordenadas x, y e altura e largura da tela. O ClearRect limpará toda a tela como:

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

Há uma tonelada de boas respostas aqui. Outra observação é que às vezes é divertido limpar apenas parcialmente a tela. isto é, "desbota" a imagem anterior em vez de apagá-la completamente. isso pode dar bons efeitos de trilhas.

é fácil. supondo que a cor de fundo seja branca:

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

Uma maneira rápida é fazer

canvas.width = canvas.width

Idk como funciona, mas funciona!

É isso que eu uso, independentemente dos limites e das transformações matriciais:

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

Basicamente, ele salva o estado atual do contexto e desenha um pixel transparente com copyas globalCompositeOperation. Em seguida, restaura o estado de contexto anterior.

Isso funcionou para o meu pieChart no chart.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

Descobri que em todos os navegadores que testo, a maneira mais rápida é realmente preencher o Rect com branco ou com a cor que você desejar. Eu tenho um monitor muito grande e, no modo de tela cheia, o clearRect é extremamente lento, mas o fillRect é razoável.

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

A desvantagem é que a tela não é mais transparente.

no webkit, você precisa definir a largura para um valor diferente e, em seguida, configurá-lo novamente para o valor inicial

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

Uma maneira simples, mas não muito legível, é escrever o seguinte:

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

// after doing some rendering

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

Eu sempre uso

cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);

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

preencha o retângulo fornecido com os valores RGBA:
0 0 0 0: com Chrome
0 0 0 255: com FF e Safari

Mas

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

deixe o retângulo preenchido com
0 0 0 255,
não importa o navegador!

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

Exemplo: context.clearRect(0, 0, canvas.width, canvas.height);

o caminho mais curto:

canvas.width += 0

maneira mais rápida:

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

Se você usar apenas o clearRect, se o tiver em um formulário para enviar seu desenho, você receberá um envio em vez da limpeza, ou talvez ele possa ser limpo primeiro e depois fazer o upload de um desenho nulo, portanto, você precisará adicionar um preventDefault no início da função:

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

Espero que ajude alguém.

Eu sempre uso isso

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

NOTA

combinar clearRect e requestAnimationFrame permite uma animação mais fluida, se é isso que você procura

Estes são ótimos exemplos de como você limpa uma tela padrão, mas se você estiver usando o paperjs, isso funcionará:

Defina uma variável global em JavaScript:

var clearCanvas = false;

No PaperScript, defina:

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

Agora, onde quer que você defina clearCanvas como true, ele limpará todos os itens da tela.