Borrar lienzo en JavaScript

El elemento <canvas> de HTML es un mapa de bits sobre el que se dibuja con JavaScript. Siempre que vuelvas a dibujar un fotograma, reinicies un dibujo o permitas que un usuario borre su trabajo, necesitas limpiar parte o la totalidad de ese mapa de bits. Este artículo muestra cómo borrar un lienzo en JavaScript con clearRect(), incluida la limpieza de toda la superficie, la conexión de la llamada a un botón y el borrado de una sola región.

Borrar todo el lienzo con clearRect()

clearRect() es un método del contexto de representación 2D (CanvasRenderingContext2D), no del propio elemento <canvas>. Se invoca sobre el objeto de contexto que devuelve canvas.getContext('2d'). Acepta cuatro argumentos —las coordenadas x e y de la esquina superior izquierda del rectángulo, además de su width y su height— y borra todos los píxeles dentro de ese rectángulo, dejándolos completamente transparentes.

Para borrar todo el lienzo, pasa un rectángulo que cubra todo el mapa de bits:

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

Aquí canvas.width y canvas.height son los atributos width y height del propio elemento canvas, es decir, las dimensiones de su mapa de bits en píxeles. Como el rectángulo comienza en el origen y abarca todo el mapa de bits, clearRect() borra todo lo que se haya dibujado antes. Ejecuta este ejemplo para ver la llamada que limpia un mapa de bits de 680 por 420:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const canvas = { width: 680, height: 420 };
console.log(`context.clearRect(0, 0, ${canvas.width}, ${canvas.height})`);

context.clearRect(0, 0, 680, 420)

Crear un lienzo y dibujar en él

Un elemento <canvas> es solo un contenedor; JavaScript realiza el dibujo a través del objeto de contexto. El siguiente ejemplo crea un lienzo de 680 por 420 y traza una curva roja sobre él para que haya contenido visible que borrar. Guárdalo como un archivo .html y ábrelo en un navegador: los ejemplos de página de este artículo se ejecutan en un navegador y no se ejecutan en el entorno de pruebas de este artículo.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Creating a canvas</title>
  </head>
  <body>
    <canvas id="canvsId" width="680" height="420"></canvas>
    <script>
      let canvas = document.getElementById('canvsId');
      let context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 80, 110, 170, 250, 170);
      context.bezierCurveTo(260, 190, 300, 160, 370, 140);
      context.bezierCurveTo(410, 140, 440, 130, 380, 110);
      context.bezierCurveTo(440, 50, 350, 40, 350, 50);
      context.bezierCurveTo(310, 10, 270, 30, 240, 40);
      context.bezierCurveTo(310, 10, 130, 15, 180, 90);
      context.closePath();
      context.lineWidth = 8;
      context.strokeStyle = 'red';
      context.stroke();
    </script>
  </body>
</html>

La página renderizada muestra el contorno rojo dibujado en el lienzo:

Borrar el lienzo con un botón

Para que el usuario pueda activar el borrado, asocia un controlador de clic a un botón y llama a clearRect() dentro de él. La página siguiente reutiliza el mismo dibujo, agrega un botón de entrada con el id clear y registra un listener que borra todo el mapa de bits en cada clic.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Clear a canvas with a button</title>
    <style>
      #button {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #button input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvs" width="680" height="420"></canvas>
    <div id="button">
      <input type="button" id="clear" value="Clear">
    </div>
    <script>
      let canvas = document.getElementById('myCanvs');
      let context = canvas.getContext('2d');
      context.beginPath();
      context.moveTo(180, 90);
      context.bezierCurveTo(120, 80, 110, 170, 250, 170);
      context.bezierCurveTo(260, 190, 300, 160, 370, 140);
      context.bezierCurveTo(410, 140, 440, 130, 380, 110);
      context.bezierCurveTo(440, 50, 350, 40, 350, 50);
      context.bezierCurveTo(310, 10, 270, 30, 240, 40);
      context.bezierCurveTo(310, 10, 130, 15, 180, 90);
      context.closePath();
      context.lineWidth = 8;
      context.strokeStyle = 'red';
      context.stroke();
      document.getElementById('clear').addEventListener('click', function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
      }, false);
    </script>
  </body>
</html>

Abre la página y el botón aparece sobre el lienzo:

Tras el clic, clearRect(0, 0, canvas.width, canvas.height) elimina todos los píxeles dibujados. El lienzo se vuelve transparente, de modo que la página que hay detrás queda visible donde antes estaba el dibujo:

Borrar una parte del lienzo y evitar errores comunes

clearRect() borra un rectángulo, no necesariamente todo el lienzo. Para eliminar solo una parte de un dibujo, pasa las coordenadas y el tamaño de esa región; por ejemplo, context.clearRect(180, 90, 200, 80) borra un área de 200 por 80 que comienza en (180, 90). Los píxeles dentro del rectángulo se vuelven transparentes mientras el resto del dibujo permanece intacto, lo que resulta útil para volver a dibujar un objeto en movimiento o un solo panel.

Algunos detalles suelen causar confusión:

• canvas.width y canvas.height son las dimensiones en píxeles del mapa de bits, definidas por los atributos del elemento o por JavaScript. Las propiedades width y height de CSS solo escalan cómo se muestra el lienzo; no redimensionan el mapa de bits, por lo que son valores incorrectos para pasar a clearRect(). Un lienzo estirado con CSS se ve más grande en la página, pero conserva la misma área dibujable.
• clearRect() sigue la transformación actual. Si llamaste a translate(), rotate() o scale(), el rectángulo que pases también se transforma. Llama primero a context.setTransform(1, 0, 0, 1, 0, 0) cuando quieras borrar en coordenadas directas del mapa de bits. Una región de recorte activa también puede limitar qué píxeles se borran.
• Borrar restaura píxeles transparentes en lugar de pintar de blanco, de modo que cualquier cosa detrás del lienzo —el fondo de la página o elementos apilados— vuelve a ser visible en la región borrada.
• La API de canvas 2D, incluida clearRect(), funciona en todos los navegadores modernos, pero los navegadores muy antiguos pueden no admitir <canvas> en absoluto, así que no confíes en una disponibilidad universal para objetivos heredados.