El elemento canvas es parte de HTML5 y permite la representación dinámica y programable de formas 2D e imágenes de mapa de bits . Es un modelo procedimental de bajo nivel que actualiza un mapa de bits . HTML5 Canvas también ayuda a crear juegos 2D .
Si bien el lienzo HTML5 ofrece su propia API de dibujo 2D , también admite la API WebGL para permitir la representación 3D con OpenGL ES .
Canvas fue introducido inicialmente por Apple para su uso en su propio componente WebKit de Mac OS X en 2004, [1] que impulsaba aplicaciones como los widgets del Dashboard y el navegador Safari . Más tarde, en 2005, fue adoptado en la versión 1.8 de los navegadores Gecko , [2] y Opera en 2006, [3] y estandarizado por el Web Hypertext Application Technology Working Group (WHATWG) en nuevas especificaciones propuestas para tecnologías web de próxima generación. [ cita requerida ]
Un lienzo canvasconsiste en una región dibujable definida en código HTML con atributos de altura y ancho . El código JavaScript puede acceder al área a través de un conjunto completo de funciones de dibujo similares a las de otras API 2D comunes , lo que permite generar gráficos de forma dinámica. Algunos usos previstos del lienzo incluyen la creación de gráficos, animaciones , juegos y composición de imágenes.
Interactuar con el lienzo implica obtener el contexto de representación del lienzo, que determina si se debe utilizar la API del lienzo, WebGL o el contexto de representación WebGL2 .
El siguiente código crea un elemento Canvas en una página HTML:
< lienzo id = "ejemplo" ancho = "200" alto = "200" >Este texto se muestra si su navegador no es compatible con HTML5 Canvas.</ lienzo >Usando JavaScript , puedes dibujar en el lienzo:
var ejemplo = documento.getElementById ( 'ejemplo ' ) ; var contexto = ejemplo.getContext ( ' 2d ' ) ; contexto.fillStyle = ' rojo ' ; contexto.fillRect ( 30 , 30 , 50 , 50 ) ; Este código dibuja un rectángulo rojo en la pantalla.
La API de Canvas también proporciona save()y restore(), para guardar y restaurar todos los atributos del contexto del lienzo.
En realidad, un lienzo tiene dos tamaños: el tamaño del elemento en sí y el tamaño de la superficie de dibujo del elemento. Al configurar los atributos de ancho y alto del elemento, se configuran ambos tamaños; los atributos CSS afectan solo al tamaño del elemento y no a la superficie de dibujo.
De forma predeterminada, tanto el tamaño del elemento canvas como el tamaño de su superficie de dibujo es de 300 píxeles de ancho y 150 píxeles de alto. En la lista que se muestra en el ejemplo, que utiliza CSS para establecer el tamaño del elemento canvas, el tamaño del elemento es de 600 píxeles de ancho y 300 píxeles de alto, pero el tamaño de la superficie de dibujo permanece sin cambios en el valor predeterminado de 300 píxeles × 150 píxeles. Cuando el tamaño de un elemento canvas no coincide con el tamaño de su superficie de dibujo, el navegador escala la superficie de dibujo para que se ajuste al elemento (lo que puede generar efectos sorprendentes y no deseados).
Ejemplo de configuración del tamaño del elemento y del tamaño de la superficie de dibujo con valores diferentes:
<!DOCTYPE html> < html > < head > < title > Tamaño del elemento Canvas: 600 x 300, Tamaño de la superficie de dibujo del lienzo: 300 x 150 </ title > < style > body { background : #dddddd ; } # canvas { margin : 20 px ; padding : 20 px ; background : #ffffff ; border : thin inset #aaaaaa ; width : 600 px ; height : 300 px ; } </ style > </ head > < body > < canvas id = "canvas" > Lona no compatible </ lienzo > </ cuerpo > </ html >SVG es un enfoque alternativo para dibujar formas en navegadores. [4] A diferencia de Canvas, que se basa en ráster , SVG se basa en vectores , de modo que cada forma dibujada se recuerda como un objeto en un gráfico de escena o Modelo de objeto de documento , que posteriormente se representa en un mapa de bits . Esto significa que si se modifican los atributos de un objeto SVG, el navegador puede volver a representar automáticamente la escena.
Los objetos Canvas, por otro lado, se dibujan en modo inmediato . En el ejemplo de Canvas anterior, la operación de dibujo del rectángulo modifica el Canvas y el sistema olvida su representación como rectángulo. Si se cambiara la posición del rectángulo, sería necesario volver a dibujar el Canvas, incluidos los objetos que pudieran haber estado cubiertos por el rectángulo. En el caso equivalente de SVG, uno podría simplemente cambiar los atributos de posición del rectángulo y el navegador determinaría cómo volver a pintarlo. Hay bibliotecas JavaScript adicionales que abstraen el modelo Canvas para tener capacidades de escena similares a SVG dentro del elemento Canvas. También se pueden usar múltiples capas de Canvas, lo que significa que solo es necesario volver a crear capas específicas cuando se requieren cambios.
Las imágenes SVG se representan en XML y se pueden crear y mantener escenas complejas con herramientas de edición XML.
El gráfico de escena SVG permite asociar controladores de eventosonClick con objetos, de modo que un rectángulo pueda responder a un evento. Para obtener la misma funcionalidad con el lienzo, se deben hacer coincidir manualmente las coordenadas del clic del mouse con las coordenadas del rectángulo dibujado para determinar si se hizo clic en él.
En teoría, Canvas es una API de nivel inferior sobre la que se pueden construir interfaces de nivel superior (por ejemplo, compatibilidad con SVG). Existen bibliotecas de JavaScript que proporcionan implementaciones SVG parciales utilizando Canvas para navegadores que no ofrecen SVG pero admiten Canvas, como los navegadores de Android 2.x. Sin embargo, este no suele ser el caso: son estándares independientes. La situación es complicada porque existen bibliotecas de gráficos de escena para Canvas y SVG tiene algunas funciones de manipulación de mapas de bits.
En el momento de su introducción, el elemento canvas fue recibido con reacciones encontradas por parte de la comunidad de estándares web. Hubo argumentos en contra de la decisión de Apple de crear un nuevo elemento propietario en lugar de respaldar el estándar SVG . Existen otras preocupaciones sobre la sintaxis, como la ausencia de un espacio de nombres . [5]
El 14 de marzo de 2007, el desarrollador de WebKit Dave Hyatt reenvió un correo electrónico de la asesora principal de patentes de Apple, Helene Plotka Workman, [6] que afirmaba que Apple se reservaba todos los derechos de propiedad intelectual relativos al borrador de trabajo de aplicaciones web 1.0 de WHATWG, con fecha del 24 de marzo de 2005, sección 10.1, titulado “Gráficos: el lienzo de mapa de bits”, [7] pero dejaba la puerta abierta a la concesión de licencias de las patentes en caso de que la especificación se transfiriera a un organismo de normalización con una política de patentes formal . Esto provocó un debate considerable entre los desarrolladores web y planteó preguntas sobre la falta de una política de patentes de WHATWG en comparación con la preferencia explícita del Consorcio World Wide Web (W3C) por las licencias libres de regalías. Posteriormente, Apple divulgó las patentes en virtud de los términos de licencia de patentes libres de regalías del W3C. [8] La divulgación significa que Apple está obligada a proporcionar una licencia libre de regalías para la patente siempre que el elemento Canvas pase a formar parte de una futura recomendación del W3C creada por el grupo de trabajo HTML. [9]
La toma de huellas dactilares de Canvas es una de las diversas técnicas de toma de huellas dactilares de navegador para rastrear a los usuarios en línea que permiten a los sitios web identificar y rastrear a los visitantes mediante el elemento Canvas de HTML5 . La técnica recibió una amplia cobertura mediática en 2014, [10] [11] [12] [13] después de que investigadores de la Universidad de Princeton y la Universidad KU Leuven la describieran en su artículo The Web never forgets . [14] Las preocupaciones sobre la privacidad con respecto a la toma de huellas dactilares de Canvas se centran en el hecho de que incluso eliminar las cookies y borrar la memoria caché no será suficiente para que los usuarios eviten el seguimiento en línea.
El elemento es compatible con las versiones actuales de Mozilla Firefox , Google Chrome , Internet Explorer , Safari , Konqueror , Opera [15] y Microsoft Edge . [16]