Canvas API: usos habituales y contexto de privacidad

Canvas API permite que una página dibuje gráficos en un elemento HTML canvas mediante JavaScript. Es una herramienta habitual del navegador para gráficos estadísticos, ilustraciones, animación, gráficos de juegos y experiencias multimedia. Para pensar en la privacidad de Canvas API, empieza por el propósito de la página: qué debería ver o hacer una persona, qué información hace falta para crear ese resultado y qué debería seguir disponible si no se puede usar la capa visual.

Canvas es una superficie de renderizado, no una interfaz completa por sí sola. Un mapa de bits puede mostrar un gráfico o una escena de juego, pero no describe automáticamente cada objeto dibujado a un lector de pantalla ni hace que todas las regiones interactivas se puedan manejar con el teclado. Canvas también respeta los límites de seguridad del navegador cuando interviene contenido de distintos orígenes. Un uso responsable combina, por tanto, un propósito visual claro, información accesible equivalente, contenido alternativo adecuado y respeto por las restricciones de origen de la página.

Para conocer la técnica de rastreo y sus implicaciones para la privacidad, consulta el artículo sobre fingerprinting con Canvas. El uso habitual de Canvas API sigue necesitando resultados claros para el usuario, alternativas accesibles y atención al contexto en el que el navegador representa el contenido. Para un contexto más amplio sobre las superficies del navegador, el sitio, la cuenta y la red, consulta la guía de privacidad entre superficies del navegador.

Entender para qué sirve Canvas

Un elemento HTML canvas proporciona un mapa de bits que los scripts pueden actualizar mientras se ejecuta una página. El estándar HTML de WHATWG lo describe como una superficie de dibujo cuya resolución puede variar y que permite representar dinámicamente gráficos, gráficos de juegos, arte y otras imágenes. MDN también describe Canvas API como una forma de dibujar gráficos con JavaScript y el elemento canvas, centrada en gráficos bidimensionales. Estas descripciones son un punto de partida útil: Canvas sirve para crear contenido e interacciones visibles en una página.

Un gráfico estadístico es un ejemplo sencillo. Una página puede dibujar barras, líneas, etiquetas o una vista similar a un mapa para ayudar a entender un conjunto de datos. La pregunta importante no es solo si aparece el dibujo. También importa si el usuario puede entender los valores, distinguir las categorías pertinentes y acceder a la misma conclusión en otro formato cuando el mapa de bits no sea adecuado. El resultado visual debe servir a la tarea, no convertirse en el único lugar donde existe su significado.

La animación es otro uso habitual. Una página puede actualizar una escena con el tiempo para comunicar un cambio, mostrar movimiento o hacer que una interacción parezca más inmediata. El movimiento puede aclarar una transición, pero también distraer o causar incomodidad. Una experiencia responsable permite pausar o reducir el movimiento no esencial y evita que las instrucciones importantes dependan exclusivamente de mirar una animación. La interfaz debe seguir siendo comprensible cuando el movimiento se detiene.

Los juegos y las ilustraciones interactivas usan Canvas para volver a dibujar una escena cuando una persona actúa. La superficie visual puede incluir un área de juego, objetos en movimiento o una puntuación que cambia. Alrededor de esa superficie siguen haciendo falta controles e indicaciones de estado comprensibles. La persona debe saber cómo empezar, pausar, continuar y entender el resultado. Si importa la interacción con el teclado, la página necesita una correspondencia útil entre las zonas interactivas visibles y los controles que pueden recibir el foco, en lugar de suponer que los píxeles bastan para permitir el acceso.

Canvas también puede formar parte de experiencias con fotos o vídeo en tiempo real. Una página puede mostrar un fotograma, aplicar un efecto visible o superponer gráficos a un medio. El propósito debe ser claro para el usuario, especialmente cuando el medio se captura, se transforma o se guarda. Explica cuándo la página utiliza la cámara, cuándo está procesando contenido y si el resultado se guarda o se envía a otro lugar. No obligues a deducirlo de la presencia de una imagen en movimiento.

En todos los casos, empieza por el resultado y la acción que espera el usuario. Pregunta si el contenido visual debe cambiar continuamente, si es necesario seleccionar o manipular partes y si una imagen estática o HTML semántico sería más sencillo. Canvas resulta útil cuando el dibujo o las actualizaciones repetidas encajan con la tarea. No es automáticamente la opción adecuada para contenido que puede expresarse con claridad mediante texto, una tabla o elementos normales de la página.

Empezar por el propósito también facilita explicar la función, probar alternativas y decidir qué datos que aporta la persona deben seguir disponibles cuando termine la interacción.

Hacer accesible el resultado visual

El contenido de Canvas es, en esencia, un mapa de bits. El navegador puede mostrar los píxeles, pero el dibujo no expone automáticamente a las tecnologías de asistencia el significado de cada objeto. Un gráfico hecho solo de píxeles puede parecer claro y, aun así, no ofrecer valores útiles a un lector de pantalla. El texto dibujado en un mapa de bits también puede ser difícil de ampliar, seleccionar, traducir o cambiar de estilo. Planifica una representación equivalente como parte de la función, no como una reparación posterior al dibujo.

En un gráfico, proporciona en la página los valores subyacentes o un resumen textual conciso. Una tabla de datos puede ofrecer valores exactos, mientras que una breve explicación puede expresar la pauta o conclusión principal. Estas alternativas deben corresponder a la misma información del dibujo y mantenerse actualizadas cuando este cambie. Si se puede filtrar el gráfico, asegúrate de que el texto o la tabla reflejen la vista seleccionada y no describan otro estado.

En un mapa o diagrama, identifica las relaciones importantes en vez de depender solo de la posición visual. Una descripción breve puede explicar la ruta, agrupación o cambio que conviene observar, mientras que una lista o un conjunto estructurado de detalles puede presentar los elementos individuales. Mantén esas alternativas sincronizadas con los controles de selección y zoom. El usuario no debería tener que reconstruir el propósito del gráfico a partir de una etiqueta decorativa o de diferencias de color que no se explican en otro lugar.

En un juego o una escena interactiva, identifica las acciones y los resultados a los que la persona necesita acceder. El estándar HTML pide una correspondencia uno a uno entre las regiones interactivas de un canvas y las áreas que pueden recibir el foco cuando el canvas es interactivo. En la práctica, los objetivos visibles deben tener controles y respuestas comprensibles. Quienes usan el teclado necesitan una vía para realizar las mismas acciones relevantes, y el foco debe ser visible. Una puntuación, una advertencia o un resultado final no deberían existir solo como un color o un cambio visual breve.

Usa HTML semántico para las etiquetas, instrucciones, botones y mensajes de estado siempre que encaje. Canvas puede proporcionar la capa visual personalizada y los elementos normales aportar estructura y nombres accesibles. Esta división también ayuda si el dibujo no se carga, no hay un script disponible o una persona utiliza una herramienta que no interpreta el mapa de bits. Una página accesible no exige que todas las personas perciban la misma superficie visual del mismo modo.

Ten en cuenta el contraste, el tamaño del texto, la dependencia del color, el movimiento y el escalado. Distingue las series de un gráfico con algo más que el color y mantén las etiquetas importantes legibles al tamaño que realmente utiliza la gente. Permite pausar la animación y conserva los controles esenciales cuando se cambia el tamaño del dibujo. En experiencias en tiempo real, presenta el estado y las acciones sin obligar a seguir una escena que cambia constantemente. Son decisiones de producto alrededor del dibujo, no funciones que Canvas proporcione automáticamente.

Haz pruebas con los métodos de interacción y las tecnologías de asistencia pertinentes para el público. Comprueba que la descripción no visual coincida con el gráfico actual, que las acciones de teclado sean fáciles de descubrir, que el orden del foco tenga sentido y que los cambios se anuncien cuando sea necesario. Una revisión estática de accesibilidad puede pasar por alto un problema que solo aparece al filtrar, cambiar el tamaño, pausar o completar una tarea. Repite las comprobaciones después de cambios importantes en el dibujo o sus controles.

Proporcionar contenido alternativo útil

El contenido alternativo es lo que ofrece la página cuando no está disponible la representación visual de canvas. El estándar HTML define cómo puede presentar canvas ese contenido cuando el elemento no se puede representar como mapa de bits. Debe ser útil por sí mismo: puede explicar el propósito de la imagen, proporcionar datos esenciales o enlazar con una experiencia equivalente. Una región vacía o un mensaje genérico no conserva la tarea.

Mantén la información alternativa alineada con el dibujo activo. Si el gráfico refleja datos actualizados, el texto alternativo, la tabla o el resumen no deberían quedarse en un estado anterior. Si se pausa una animación, la página debe seguir comunicando el estado pertinente. Si una escena de juego cambia después de una acción, sus controles accesibles y su estado deben describir el resultado actual. Trata el contenido alternativo como otra presentación de la función, con la misma responsabilidad y vía de actualización que el propio canvas.

El contenido alternativo y la accesibilidad están relacionados, pero no son lo mismo. El contenido que aparece solo cuando Canvas no es compatible quizá no esté disponible para un lector de pantalla cuando el canvas sí se representa. A la inversa, el nombre accesible del canvas no necesariamente describe el gráfico detallado o la escena interactiva que contiene. Proporciona la alternativa adecuada en ambos casos: un comportamiento alternativo útil y una experiencia equivalente para quienes no pueden utilizar el mapa de bits tal como se presenta.

Piensa en más de una condición de fallo. Puede que la página se cargue sin el script de dibujo, que no haya un contexto de representación disponible, que falte una fuente multimedia o que se bloquee un recurso esencial. El usuario debería poder entender para qué sirve la función y qué acción puede realizar a continuación. Si no se puede ofrecer una experiencia interactiva equivalente, explica la limitación y no presentes una superficie inoperante como si estuviera completa.

El contenido alternativo también es útil en dispositivos con poco ancho de banda o capacidades limitadas, en vistas de impresión y en tareas donde un gráfico no es la representación más práctica. Un resumen textual puede comunicar rápidamente el punto principal; una tabla descargable puede facilitar el trabajo posterior; una imagen estática puede bastar para una ilustración no interactiva. Elige las alternativas según la tarea del usuario, no como si un formato sirviera para todas las situaciones.

Mantén visible la elección del usuario cuando la parte visual tenga comportamientos opcionales. Puede que una persona prefiera una vista estática, menos movimiento, una representación sencilla o un control para pausar. Recordar una preferencia puede dar continuidad, pero explica dónde se aplica y permite cambiarla después. No deduzcas una preferencia amplia a partir de una sola acción si una opción más limitada basta para la necesidad inmediata.

Respetar los límites de seguridad del navegador

Canvas funciona dentro del modelo de origen de la plataforma web. Si una página dibuja cierto contenido de otro origen sin obtener el permiso requerido de ese recurso, el mapa de bits del canvas deja de considerarse origin-clean. En ese estado, el estándar HTML restringe el acceso al mapa de bits y su serialización. Este límite ayuda a impedir que una página use canvas como vía irrestricta para inspeccionar contenido de otro origen.

Esta restricción no es un error accidental de representación que haya que sortear. Forma parte del modelo de seguridad para contenido dibujado desde distintos orígenes. Si una función necesita una imagen o un recurso multimedia de otro origen, utiliza un mecanismo compatible en el que el propietario del recurso permita explícitamente el acceso previsto. En caso contrario, limita la experiencia a operaciones que no requieran el acceso que el navegador deniega y explica la limitación cuando afecte a la tarea.

Diseña el flujo según el origen del recurso y las expectativas de autorización. Una página puede mostrar medios sin tener permiso para tratar sus píxeles como datos legibles localmente o exportables. Son capacidades distintas. Explica qué hará la página con el recurso, obtén los permisos que exige la plataforma y evita prometer que cualquier medio visible también se podrá transformar o guardar.

En fotos y vídeo, explica las etapas visibles para el usuario: elegir o proporcionar el medio, previsualizarlo, aplicar un efecto y guardar o compartir un resultado. Si la experiencia utiliza entrada en directo, ofrece una forma clara de iniciar y detenerla e indica cuándo está activa. Mantén el procesamiento alineado con el propósito solicitado y no conserves ni transmitas un resultado salvo que forme parte de la tarea explicada.

Facilita distinguir si una acción afecta al original o a un resultado aparte. La vista previa de un efecto no debería reemplazar silenciosamente el archivo aportado por la persona, y al guardar deberían entenderse el destino y el formato. Si se puede cancelar la tarea, ofrece una forma clara de detenerla antes de guardar o compartir el resultado. Así las personas pueden decidir con conocimiento sobre sus medios sin tener que entender la implementación de representación.

Cuando un recurso esté bloqueado o no se pueda usar según las reglas de origen aplicables, falla de forma clara. Ofrece una alternativa que respete la política del propietario, como pedir que se elija un archivo local cuando eso sirva para la tarea, o mostrar una vista previa no interactiva cuando corresponda. No insinúes que una decisión de diseño de la página puede sortear la restricción del navegador. Los límites de seguridad son condiciones del diseño del producto, no obstáculos que deban vencerse.

Diseñar y mantener Canvas de forma responsable

Empieza la planificación de la función con una breve descripción del resultado visible para el usuario. Identifica por qué Canvas es adecuado, qué datos y medios requiere la tarea, si el resultado cambia con el tiempo y qué representación no basada en Canvas está disponible. Así, el alcance de la función resulta comprensible para diseñadores, desarrolladores y usuarios. También mantiene el debate sobre privacidad vinculado a la tarea real, en vez de a afirmaciones vagas sobre una tecnología.

Prefiere la presentación menos compleja que cumpla el propósito. Una tabla o un gráfico con HTML semántico quizá sea más fácil de revisar y adaptar que un mapa de bits personalizado. Un dibujo dinámico puede ser adecuado para un juego, una animación o una visualización interactiva. La decisión debe tener en cuenta la interacción, la respuesta a distintos tamaños, la accesibilidad y el mantenimiento, no solo el estilo visual o la comodidad de implementación.

Haz explícitas las decisiones sobre entradas y conservación. Informa a las personas cuando la función necesite una imagen seleccionada, entrada de cámara o vídeo, o preferencias guardadas. Distingue el procesamiento necesario para mostrar el resultado solicitado del almacenamiento o uso compartido opcional. Mantén el control del usuario sobre el inicio y el fin del uso de medios y explica claramente qué ocurre antes de que la información salga del navegador o siga disponible después.

Mantén coherente la interfaz entre la representación visual y las alternativas. Las etiquetas, los controles, el estado y el contenido alternativo deben usar nombres consistentes y describir el mismo estado. Cuando cambie lo visual, también deben actualizarse su equivalente textual y la respuesta de la interacción. Si una persona pausa la animación o cambia de vista, comunica ese estado sin depender solo de los píxeles.

Revisa la función después de cambios en su propósito, las fuentes multimedia, los controles del usuario o la compatibilidad del navegador. Prueba el recorrido normal, el caso de un recurso bloqueado y las rutas de accesibilidad pertinentes. Confirma que el contenido alternativo siga siendo útil, se respeten los límites de origen y la persona pueda entender si los medios o resultados están activos, son locales, se han guardado o se han compartido. Estas comprobaciones ayudan a crear una función responsable; no demuestran que se hayan eliminado todos los problemas de privacidad posibles.

Canvas es una forma flexible de crear gráficos en el navegador, pero una buena implementación es más que un mapa de bits que simplemente se representa. Vincula el dibujo con un propósito claro para el usuario, ofrece acceso equivalente a su significado, conserva alternativas útiles, respeta los límites origin-clean y explica qué ocurre con las entradas y los resultados aportados por las personas. Así se ofrece una función útil sin exagerar lo que API o sus propiedades de privacidad pueden garantizar.

Fuentes públicas

• Estándar HTML de WHATWG: el elemento canvas
• MDN: Canvas API