Limpiar el Canvas: clearRect vs fillRect vs Width

Últimamente ando leyendo un libro sobre HTML5 y Canvas. Uno de los aspectos que me llamó la atención es que en todos los ejemplos expuestos utilizaba el método fillRect para limpiar el área del canvas. Así que me puse a investigar sobre las distintas técnicas utilizadas para limpiar el área de dibujo del Canvas:

Técnica 1: clearRect.

Esta es la técnica que he utilizado desde el primer día. La función clearRect es muy simple:

var oCanvas = document.getElementById("canvas");
var oContext = oCanvas.getContext("2d");
oContext.clearRect(x, y, width, height);

La función espera recibir 4 parámetros:

• x: Posición en el eje x donde empezar el área de limpiado.
• y: Posición en el eje y donde empezar el área de limpiado.
• width: ancho del área de limpiado.
• height: alto del área de limpiado.

Si quisiéramos limpiar toda la pantalla, la solución típica seria la siguiente:

oContext.clearRect(0, 0, oCanvas.width, oCanvas.height);

Técnica 2: fillRect

Ésta técnica consiste en pintar todo el área de dibujo del color del fondo de nuestra aplicación.

var oCanvas = document.getElementById("canvas");
var oContext = oCanvas.getContext("2d");
 
oContext.save();
oContext.fillStyle = "#FFF";
oContext.fillRect(x, y, width, height);
oContext.restore();

Cómo veis, es algo más “compleja” que la anterior, ya que debemos guardar el estado del contexto, cambiar el color, pintar el rectángulo, y restaurar el estado del contexto.

El método fillRect espera exactamente los mismos parámetros que clearRect.

Técnica 3: oCanvas.width = oCanvas.width

Ésta es una de las técnicas más “curiosas”, ya que (al menos para mí), no sigue ninguna lógica. Al parecer, si reasignamos el width de nuestro canvas éste automáticamente se limpia. Es decir, si hiciéramos:

var oCanvas = document.getElementById("canvas");
var oContext = oCanvas.getContext("2d");
 
oCanvas.width = oCanvas.width;

Obtendríamos el mismo resultado que con las técnicas anteriores.

Análisis de rendimiento:

Como siempre, ¡JSPerf al rescate! http://jsperf.com/improving-clear-canvas

Si algo queda claro, es que seguramente la opción “menos óptima” es la segunda (fillRect). Ya que no destaca en ninguno de los navegadores.

Ahora bién, ¿clearRect o width? Pues lo único que se me ocurre decir es que utilicéis una u otra dependiendo del target de vuestra aplicación. Por ejemplo, si queréis hacer un juego para móvil, parece ser que la opción de width=width es más eficiente.