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 contenido	Un elemento organizativo, un elemento normal o un elemento con medios integrados.
Contenido permitido	Cualquier contenido que no tenga antecedentes.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte contenido incrustado.
Interfaz DOMO	`HTMLCanvasElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

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 width y height en el elemento <canvas> en lugar de usar CSS.