Elemento canvas en HTML

Elemento canvas en html

Utilice el elemento html canvas con su API para dibujar y animar gráficos. El siguiente ejemplo agregará un elemento <canvas> a un documento HTML, especificando su altura a través de la propiedad height y el ancho a través de la propiedad width.

Proporcionaremos un texto alternativo si el navegador no puede mostrar el elemento, es útil proporcionar contenido alternativo a aumentar la accesibilidad del contenido del elemento.

< canvas  id = "canvas"  width = "300"  height = "300" > 
  texto alternativo que describe lo que aparece en el elemento < code > canvas </ code > .
</ canvas >

Suponiendo que dibujamos un rectángulo de 80×80 en rojo, el código JavaScript se verá así :

< script > 
  var  lienzo  =  documento . getElementById ( "canvas" ); 
  var  context  =  lienzo . getContext ( "2d" ); 
  contexto . fillStyle  =  "# FF0000" ; 
  contexto . fillRect ( 0 ,  0 ,  80 ,  80 ); 
</ script >

Etiqueta html canvas

Clasificaciones de contenidoUn elemento organizativo, un elemento normal o un elemento con medios integrados.
Contenido permitidoCualquier contenido que no tenga antecedentes.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido incrustado.
Interfaz DOMOHTMLCanvasElement

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
SoportadoSoportadoSoportadoSoportadoSoportado

Características

En este elemento html canvas se pueden utilizar propiedades globales.

height

La altura del marco de dibujo de un objeto en <canvas> píxeles, el valor predeterminado es 150.

width

El ancho del marco de dibujo en un elemento <canvas> en un píxel, el valor predeterminado es 300.

Descripción de uso

Contenido alternativo

Puede y debe proporcionar contenido alternativo dentro del elemento <canvas>, y ese contenido se publicará en navegadores más antiguos que no admiten este elemento y en navegadores en los que el usuario ha desactivado JavaScript.

Debe usarse la etiqueta de cierre

A diferencia del elemento <img>, se supone que se proporciona la etiqueta de cierre <‎/canvas>.

Dimensiones del marco de dibujo

Las dimensiones del marco gráfico se pueden cambiar usando CSS, la imagen se redimensionará a escala en las dimensiones especificadas por CSS, y si el gráfico aparece distorsionado, intente especificar las dimensiones a través de las dos propiedades widthheight en el elemento <canvas> en lugar de usar CSS.