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 procesal 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] impulsando aplicaciones como los widgets Dashboard y el navegador Safari . Posteriormente, en 2005, fue adoptado en la versión 1.8 de los navegadores Gecko , [2] y Opera en 2006, [3] y estandarizado por el Grupo de Trabajo de Tecnología de Aplicaciones de Hipertexto Web (WHATWG) en nuevas especificaciones propuestas para tecnologías web de próxima generación. [ cita necesaria ]
A canvasconsta de una región dibujable definida en código HTML con atributos de alto 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 , permitiendo así gráficos generados dinámicamente. 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, lo que determina si se utiliza 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:
< id del lienzo = "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 . llenarRect ( 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. Establecer los atributos de ancho y alto del elemento establece ambos tamaños; Los atributos CSS afectan sólo el tamaño del elemento y no la superficie de dibujo.
De forma predeterminada, tanto el tamaño del elemento del lienzo como el tamaño de su superficie de dibujo son 300 píxeles de pantalla de ancho y 150 píxeles de pantalla de alto. En la lista que se muestra en el ejemplo, que utiliza CSS para establecer el tamaño del elemento del lienzo, 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 de lienzo 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 resultar en efectos sorprendentes y no deseados).
Ejemplo de configuración del tamaño del elemento y del tamaño de la superficie del dibujo en diferentes valores:
<!DOCTYPE html> < html > < head > < title > Tamaño del elemento del lienzo: 600 x 300, Tamaño de la superficie del dibujo del lienzo: 300 x 150 </ title > < style > body { background : #dddddd ; } # lienzo { margen : 20 px ; relleno : 20 píxeles ; fondo : #ffffff ; borde : inserción delgada #aaaaaa ; ancho : 600 píxeles ; altura : 300 píxeles ; } </ estilo > </ cabeza > < cuerpo > < lienzo id = "lienzo" > Lienzo no compatible </ lienzo > </ cuerpo > </ html >SVG es un método alternativo para dibujar formas en navegadores. [4] A diferencia del lienzo, que está basado en ráster , SVG está basado en vectores , de modo que cada forma dibujada se recuerda como un objeto en un gráfico de escena o modelo de objetos de documento , que posteriormente se representa en un mapa de bits . Esto significa que si se cambian los atributos de un objeto SVG, el navegador puede volver a renderizar la escena automáticamente.
Los objetos Canvas, por otro lado, se dibujan en modo inmediato . En el ejemplo de lienzo anterior, la operación de dibujo del rectángulo modifica el lienzo y el sistema olvida su representación como un rectángulo. Si se cambiara la posición del rectángulo, sería necesario volver a dibujar el lienzo, incluidos los objetos que pudieran haber quedado cubiertos por el rectángulo. En el caso de SVG equivalente, 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 de JavaScript adicionales que abstraen el modelo de lienzo para tener capacidades de escena tipo svg dentro del elemento de lienzo. También se pueden utilizar varias capas de lienzo, lo que significa que solo es necesario recrear 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, por lo que un rectángulo puede 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.
Conceptualmente, canvas es una API de nivel inferior sobre la cual se pueden construir interfaces de nivel superior (por ejemplo, soporte SVG). Existen bibliotecas de JavaScript que proporcionan implementaciones parciales de SVG utilizando lienzo para navegadores que no proporcionan SVG pero admiten lienzo, como los navegadores en Android 2.x. Sin embargo, normalmente este no es el caso: son estándares independientes. La situación es complicada porque existen bibliotecas de gráficos de escenas para lienzo y SVG tiene alguna funcionalidad de manipulación de mapas de bits.
En el momento de su introducción, el elemento lienzo generó reacciones encontradas por parte de la comunidad de estándares web. Ha habido argumentos en contra de la decisión de Apple de crear un nuevo elemento propietario en lugar de soportar 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 , envió 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 relacionados con el borrador de trabajo de aplicaciones web 1.0 de WHATWG, con fecha del 24 de marzo de 2005. Sección 10.1, titulada “Gráficos: el lienzo de mapas de bits”, [7] pero dejó la puerta abierta a la concesión de licencias de patentes en caso de que la especificación se transfiera a un organismo de normalización con una política de patentes formal . Esto provocó una discusión considerable entre los desarrolladores web y planteó dudas sobre la falta de una política de patentes del WHATWG en comparación con el favor explícito del World Wide Web Consortium (W3C) a las licencias libres de regalías. Posteriormente, Apple reveló las patentes según los términos de licencia de patentes libres de regalías del W3C. [8] La divulgación significa que Apple debe proporcionar una licencia libre de regalías para la patente siempre que el elemento Canvas se convierta en 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 varias técnicas de toma de huellas digitales del navegador para rastrear usuarios en línea que permiten a los sitios web identificar y rastrear a los visitantes utilizando el elemento Canvas 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 La Web nunca olvida . [14] Las preocupaciones sobre la privacidad con respecto a las huellas dactilares del lienzo se centran en el hecho de que incluso eliminar las cookies y borrar el 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 . [dieciséis]