Cómo limpiar el lienzo para volver a dibujar

Después de experimentar con operaciones compuestas y dibujar imágenes en el lienzo, ahora estoy tratando de eliminar imágenes y componer. ¿Cómo hago esto?

Necesito limpiar el lienzo para volver a dibujar otras imágenes; esto puede continuar por un tiempo, así que no creo que dibujar un nuevo rectángulo cada vez sea la opción más eficiente.

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

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

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

Esta es la forma más rápida y descriptiva de borrar todo el lienzo.

No utilice: canvas.width = canvas.width;

El restablecimiento canvas.widthrestablece todos los estados del lienzo (por ejemplo, transformaciones, ancho de línea, estilo de trazo, etc.), es muy lento (en comparación con clearRect), no funciona en todos los navegadores y no describe lo que realmente está intentando hacer.

Manejo de coordenadas transformadas

Si ha modificado la matriz de transformación (por ejemplo scale, usando , rotateo translate), entonces context.clearRect(0,0,canvas.width,canvas.height)probablemente no borrará toda la parte visible del lienzo.

¿La solución? Restablezca la matriz de transformación antes de limpiar el lienzo:

// 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: Acabo de hacer algunos perfiles y (en Chrome) es aproximadamente un 10% más rápido borrar un lienzo de 300x150 (tamaño predeterminado) sin restablecer la transformación. A medida que aumenta el tamaño de su lienzo, esta diferencia disminuye.

Eso ya es relativamente insignificante, pero en la mayoría de los casos obtendrá mucho más de lo que está limpiando y creo que esta diferencia de rendimiento es irrelevante.

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

Si está dibujando líneas, asegúrese de no olvidar:

context.beginPath();

De lo contrario, las líneas no se despejarán.

Otros ya han hecho un excelente trabajo respondiendo la pregunta, pero si un clear()método simple en el objeto de contexto fuera útil para usted (lo fue para mí), esta es la implementación que uso en base a las respuestas aquí:

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

• Chrome responde bien a: context.clearRect ( x , y , w , h );como lo sugiere @ Pentium10, pero IE9 parece ignorar por completo esta instrucción.
• Parece que IE9 responde: canvas.width = canvas.width;pero no borra líneas, solo formas, imágenes y otros objetos a menos que también use la solución de @John Allsopp de cambiar primero el ancho.

Entonces, si tiene un lienzo y un contexto creados así:

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

Puedes usar un 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;
}

Esto es 2018 y aún no existe un método nativo para borrar completamente el lienzo para volver a dibujar. clearRect() No borra el lienzo por completo. Los dibujos de tipo sin relleno no se borran (p. Ej. rect())

1.Para limpiar completamente el lienzo, independientemente de cómo dibuje:

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

Pros: conserva el estilo de trazo, el estilo de relleno, etc .; Sin retraso;

Contras: innecesario si ya está utilizando beginPath antes de dibujar cualquier cosa

2.Utilizando el ancho / alto hack:

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

O

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

Pros: Funciona con IE Contras: Restablece strokeStyle, fillStyle a negro; Laggy;

Me preguntaba por qué no existe una solución nativa. En realidad, clearRect()se considera como la solución de línea única porque la mayoría de los usuarios lo hacen beginPath()antes de dibujar cualquier ruta nueva. Aunque beginPath solo se debe usar al dibujar líneas y no en rutas cerradas comorect().

Esta es la razón por la cual la respuesta aceptada no resolvió mi problema y terminé perdiendo horas probando diferentes hacks. Te maldigo mozilla

Use el método clearRect pasando coordenadas x, y, altura y ancho del lienzo. ClearRect borrará todo el lienzo como:

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

Hay un montón de buenas respuestas aquí. Una nota adicional es que a veces es divertido borrar solo parcialmente el lienzo. es decir, "desvanece" la imagen anterior en lugar de borrarla por completo. Esto puede dar buenos efectos de senderos.

es fácil. suponiendo que el color de fondo sea blanco:

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

Una forma rápida es hacer

canvas.width = canvas.width

¡No sé cómo funciona, pero lo hace!

Esto es lo que uso, independientemente de los límites y las transformaciones matriciales:

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

Básicamente, guarda el estado actual del contexto y dibuja un píxel transparente con copyas globalCompositeOperation. Luego, restaura el estado del contexto anterior.

Esto funcionó para mi pieChart en 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

He descubierto que en todos los navegadores que pruebo, la forma más rápida es llenar Rect con blanco o con el color que desee. Tengo un monitor muy grande y en modo de pantalla completa clearRect es extremadamente lento, pero fillRect es razonable.

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

El inconveniente es que el lienzo ya no es transparente.

en webkit necesita establecer el ancho en un valor diferente, luego puede volver a establecerlo en el 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;
}

Una manera simple, pero no muy legible es escribir esto:

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

// after doing some rendering

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

Yo siempre uso

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

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

rellena el rectángulo dado con valores RGBA:
0 0 0 0: con Chrome
0 0 0 255: con FF y Safari

Pero

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

deje que el rectángulo se llene con
0 0 0 255
sin importar el navegador!

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

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

El camino más corto:

canvas.width += 0

la manera más 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

Si usa clearRect solo, si lo tiene en un formulario para enviar su dibujo, recibirá un envío en lugar del borrado, o tal vez pueda borrarse primero y luego cargar un dibujo vacío, por lo que deberá agregar un preventDefault al comienzo de la función:

   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 ayude a alguien.

Siempre uso esto

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

NOTA

la combinación de clearRect y requestAnimationFrame permite una animación más fluida si eso es lo que está buscando

Todos estos son excelentes ejemplos de cómo limpiar un lienzo estándar, pero si está utilizando paperjs, entonces esto funcionará:

Defina una variable global en JavaScript:

var clearCanvas = false;

De su PaperScript defina:

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

Ahora, donde establezca clearCanvas en true, borrará todos los elementos de la pantalla.