Introducción
No importa si usas un contexto 2D o WebGL, cualquiera que haya trabajado alguna vez con el elemento <canvas> sabrá que puede ser extremadamente difícil de depurar. Trabajar con un lienzo suele implicar una lista de llamadas larga y difícil de seguir:
function draw() {
context.clearRect(0, 0, 258, 258);
context.fillStyle = "#EEEEEE";
context.beginPath();
context.arc(129, 129, 127, 0, 6.28, true);
context.closePath();
context.fill();
// … and on and on
}
A veces, quieres capturar las instrucciones enviadas a un contexto de lienzo y revisarlas una por una. Por suerte, hay una nueva función de inspección de lienzo en las Herramientas para desarrolladores de Chrome que nos permite hacer precisamente eso.
En este artículo, te mostraré cómo usar esta función para comenzar a depurar tu trabajo de lienzo. El inspector admite contextos 2D y de WebGL, por lo que, independientemente del que uses, deberías poder obtener información de depuración útil de inmediato.
Getting Started
Para comenzar, ve a about:flags en Chrome y activa “Habilitar experimentos en las Herramientas para desarrolladores”.
A continuación, dirígete a Herramientas para desarrolladores y presiona el engranaje 
en la esquina inferior derecha. Desde allí, puedes ir a Experimentos y habilitar la inspección de Canvas:
Para que se apliquen los cambios, debes cerrar y volver a abrir Herramientas para desarrolladores (puedes usar Alt+R o Option+R, una alternativa práctica).
Cuando se vuelva a abrir Herramientas para desarrolladores, ve a la sección Perfiles y verás una nueva opción de Generador de perfiles de Canvas.
Para comenzar, notarás que Canvas Profiler está inhabilitado. Cuando tengas una página con un lienzo que quieras depurar, presiona Enable. La página se volverá a cargar y estará lista para capturar las llamadas de <canvas>:
Deberás decidir si quieres capturar un solo fotograma o fotogramas consecutivos, en los que un fotograma sea exactamente igual al que verías en Timeline de Herramientas para desarrolladores.
Single fotograma captura las llamadas hasta el final del fotograma actual y, luego, se detiene. Los fotogramas consecutivos, por otro lado, capturan todos los fotogramas de todos los elementos <canvas> hasta que le indicas que se detenga. El modo que elijas dependerá de cómo uses el elemento <canvas>. Para una animación en curso, es posible que desees capturar un solo fotograma. En el caso de una animación breve que tiene lugar en respuesta a un evento del usuario, es posible que debas capturar fotogramas consecutivos.
Con eso ya tenemos todo listo para comenzar a capturar imágenes.
Cómo capturar fotogramas
Para ello, presiona Iniciar y, luego, interactúa con la app como lo harías normalmente. Después de un tiempo, regresa a Herramientas para desarrolladores y, si realizas capturas consecutivas, presiona Detener.
Ahora tienes un perfil nuevo y brillante en la lista de la izquierda, con la cantidad de llamadas de contexto capturadas en todos los elementos <canvas>. Haz clic en el perfil y verás una pantalla similar a esta:
En el panel inferior, verás una lista de todos los fotogramas capturados por los que puedes recorrer. A medida que hagas clic en cada uno, la captura de pantalla de la parte superior te mostrará el estado del elemento <canvas> al final de ese fotograma. Si tienes varios elementos <canvas>, puedes elegir cuál se muestra en el menú que se encuentra debajo de la captura de pantalla.
Dentro del marco, verás que puedes dibujar grupos de llamadas. Cada grupo de llamadas de dibujo contiene una sola llamada de dibujo, que será la última del grupo. ¿Cómo se llama la atención? Para un contexto 2D que sería elementos como clearRect(), drawImage(), fill(), stroke(), putImageData() o cualquier función de renderización de texto, y para WebGL sería clear(), drawArrays() o drawElements(). En esencia, es cualquier cosa que cambiaría el contenido del búfer de dibujo actual. (Si no te gustan los gráficos, puedes pensar en un búfer como un mapa de bits con píxeles que manipulamos).
Ahora, todo lo que debes hacer es avanzar por la lista. Puedes hacerlo en el marco, dibujar un grupo de llamadas o a nivel de la llamada. Sin importar la forma que elijas para recorrer la lista (y debajo de la captura de pantalla haya botones que te ayudan a navegar rápidamente), verás el contexto en ese punto, lo que significa que podrás encontrar y corregir los errores rápidamente a medida que aparezcan.
Encontrar las diferencias
Otra función útil es la capacidad de ver qué propiedades y variables cambiaron entre dos llamadas.
Para ver que solo tienes que hacer clic en el botón de la barra lateral (
), se abrirá una vista nueva. A medida que avances por las llamadas de dibujo, verás las propiedades que se actualizaron. Si colocas el cursor sobre ellos, los búferes o arrays mostrarán su contenido.
Hazte escuchar.
Ahora ya sabes cómo depurar el trabajo de tu lienzo en las Herramientas para desarrolladores de Chrome. Si tienes comentarios sobre la herramienta Generador de perfiles de Canvas, informa un error o publícalo en el grupo de Herramientas para desarrolladores de Chrome. Avísanos si encuentras errores o si hay algo más que te gustaría ver cuando inspeccionas un <canvas>, ya que las herramientas de Chrome se mejoran solo a través del uso y los comentarios de los desarrolladores.