Cómo limpiar el lienzo para volver a dibujar

Question

Después de experimentar con operaciones de composición y dibujar imágenes en el lienzo ahora estoy tratando de eliminar las imágenes y composición. ¿Cómo puedo hacer esto?

necesito aclarar el lienzo para volver a dibujar otras imágenes; Esto puede continuar durante un tiempo, así que no creo que dibujar un rectángulo nuevo cada vez que va a ser la opción más eficiente.

Answer 1

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

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

Answer 2

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

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

No utilice: canvas.width = canvas.width;

Restablecimiento canvas.width restablece todos los estados de la lona (por ejemplo, transformaciones, anchoLinea, strokeStyle, etc.), es muy lento (en comparación con clearRect), no funciona en todos los navegadores, y que no describe lo que son en realidad tratando de hacer.

Tratar con coordenadas transformado

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

La solución? Cambiar la matriz de transformación antes de la limpieza de la 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 Yo sólo he hecho algunos perfiles y (en Chrome) es aproximadamente un 10% más rápido para limpiar un lienzo 300x150 (tamaño por defecto) sin restablecer la transformación. A medida que el tamaño de la tela aumenta esta diferencia gotas.

Esto ya es relativamente insignificante, pero en la mayoría de los casos será la elaboración considerablemente más de lo que están limpiando y creo que esta diferencia de rendimiento sea irrelevante.

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

Answer 3

Si está dibujando líneas, asegúrese de que no se olvide:

context.beginPath();

De lo contrario las líneas no ser anulado.

Answer 4

Otros ya han hecho un excelente trabajo de contestar la pregunta, pero si un método clear() simple en el objeto de contexto sería útil para usted (que era yo), esta es la aplicación que utilizar en función de 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
};

Answer 5

• Chrome responde bien a:. context.clearRect ( x , y , w , h ); según lo sugerido por @ Pentium10 pero IE9 parece ignorar por completo esta instrucción
• IE9 parece responder a:. canvas.width = canvas.width; pero no es así líneas claras, formas sólo, fotos y otros objetos a menos que también utiliza la solución de cambiar el ancho de primera @ John Allsopp

Así que si usted tiene un lienzo y el contexto creado de esta manera:

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

Se puede utilizar 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;
}

Answer 6

método Uso clearRect mediante el paso x, y coordina y altura y la anchura de la lona. ClearRect borrará toda la lona como:

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

Answer 7

Este es 2018 y todavía no existe un método nativo de la lona del todo claro para volver a dibujar. clearRect() no borrar el lienzo completo. dibujos de tipo no de relleno no se borran a cabo (por ejemplo. rect())

1.To completamente clara lienzo con independencia de cómo se dibuja:

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

Pros: Conserva strokeStyle, fillStyle etc .; Sin retraso;

Contras: No son necesarios si ya está utilizando beginPath antes de sacar nada

2.Using el hack anchura / altura:

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() es considerado como la solución de una sola línea, porque la mayoría de los usuarios beginPath() antes de sacar cualquier nuevo camino. Aunque beginPath es sólo para ser usado al dibujar líneas y no como camino cerrado rect().

Esta es la razón por la cual la respuesta aceptada no resolvió mi problema y que terminó perdiendo horas tratando diferentes cortes. que Mozilla

maldecir

Answer 8

hay un montón de buenas respuestas aquí. Una nota adicional es que a veces es divertido para borrar sólo parcialmente el lienzo. es decir, "desaparecer" la imagen anterior en lugar de borrar por completo. esto puede dar senderos efectos.

es fácil. suponiendo que su color de fondo es 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);

Answer 9

Una forma rápida es hacer

canvas.width = canvas.width

Idk cómo funciona, pero lo hace!

Answer 10

en WebKit es necesario establecer el ancho a un valor diferente, entonces se puede establecer de nuevo al valor inicial

Answer 11

He encontrado que en todas las pruebas de los navegadores I, la forma más rápida es en realidad fillRect con blanco, o whataever color que le gustaría. Tengo un gran monitor y en el modo de pantalla completa del clearRect es extremadamente lento, pero el fillRect es razonable.

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

El inconveniente es que la tela ya no es transparente.

Answer 12

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

Answer 13

Esto funcionó para mi el gráfico circular 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

Answer 14

Esto es lo que yo uso, sin tener en cuenta los límites y las transformaciones de 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();
}

Básicamente, se guarda el estado actual del contexto, y dibuja un píxel transparente con copy como globalCompositeOperation . A continuación, restaura el estado anterior contexto.

Answer 15

Una manera simple, pero no es muy fácil de leer que escribir esto:

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

// after doing some rendering

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

Answer 16

Siempre uso

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

Answer 17

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

Answer 18

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

llenar el rectángulo dado con los 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);  

dejar que el rectángulo relleno con
0 0 0 255
sin importar el navegador!

Answer 19

Si utiliza clearRect solamente, si lo tiene en un formulario para enviar su dibujo, podrás conseguir un lugar enviar el claro, o tal vez se puede borrar primero y luego subir un dibujo vacío, por lo que tendrá añadir un preventDefault en el beggining 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);">

Esperamos que ayude a alguien.

Answer 20

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

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

Answer 21

Estos son todos los grandes ejemplos de cómo se borra un lienzo estándar, pero si está utilizando paperjs, entonces esto va a trabajar:

Definir una variable global en JavaScript:

var clearCanvas = false;

Desde su PaperScript definir:

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

Ahora, dondequiera que establece ClearCanvas true, se borrará todos los elementos de la pantalla.