Como limpar a tela para redesenhar

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

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

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

Lidar com coordenadas transformadas

Se modificou a matriz de transformação (por exemplo, usando scale, rotate, ou translate) então context.clearRect(0,0,canvas.width,canvas.height) provavelmente não irá limpar toda a parte visível da 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();

Editar: Acabei de fazer alguns perfis e (no Chrome) é cerca de 10% mais rápido para limpar uma área de 300x150 (tamanho padrão) sem reiniciar a transformação. À medida que o tamanho da sua tela aumenta esta diferença cai.

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

Se está a desenhar linhas, certifique-se de que não se esquece:

context.beginPath();

Outros já fizeram um excelente trabalho respondendo à pergunta, mas se um método simples clear() sobre o objeto de contexto seria útil para você (foi para mim), esta é a implementação que eu uso com base em 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();
    }           
};

Utilização:

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 a: canvas.width = canvas.width; mas não desimpede linhas, apenas formas, imagens e outros objectos, a não ser que use também a solução de @John Allsopp para mudar primeiro a largura.

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

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

Usar o método clearRect passando por coordenadas x, y e altura e largura da área de desenho. O ClearRect irá limpar toda a área de desenho como:

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

Na webkit você precisa definir a largura para um valor diferente, então você pode configurá-la de volta para o valor inicial

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

A desvantagem é que a tela já não é transparente.

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

<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

Uma maneira rápida é fazer

canvas.width = canvas.width

Imagina como funciona, mas funciona!

A 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

Isto é o que eu uso, independentemente dos limites e transformações da matriz:

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 guarda o estado actual do contexto, e desenha um pixel transparente com copy Como globalCompositeOperation. Então, restaura o estado de contexto anterior.

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

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

// after doing some rendering

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

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

Preencha o rectângulo indicado com os valores de RGBA:
0 0 0 0: com cromo
0 0 0 255: com FF & Safari

Mas

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

Deixar o rectângulo cheio de
0 0 0 255
não importa o navegador !

Se usar o clearRect apenas, se o tiver num formulário para enviar o seu desenho, irá obter um submit em vez da compensação, ou talvez possa ser limpo primeiro e depois enviar um desenho vazio, por isso terá de adicionar um salto preventivo 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);">

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

Todos estes são grandes exemplos de como você limpa uma tela padrão, mas se você está usando paperjs, então isso vai funcionar:

Defina uma variável global em JavaScript:

var clearCanvas = false;

A partir do teu programa define:

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