El elemento HTML
<canvas>se utiliza para dibujar gráficos en una página web.
¿Qué es canvas en HTML?
El elemento HTML <canvas> se utiliza para dibujar gráficos, sobre la marcha, a través de JavaScript.
El elemento <canvas> es solo un contenedor de gráficos. Debes usar JavaScript para dibujar los gráficos.
Canvas tiene varios métodos para dibujar rutas, cuadros, círculos, textos y agregar imágenes.
Compatibilidad con los navegadores
Los números de la siguiente tabla especifican la primera versión del navegador que es totalmente compatible con el elemento <canvas>.
| Elemento | Chrome | Edge | Mozilla | Safari | Opera |
<canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Ejemplos
Un elemento <canvas> es un área rectangular en una página HTML. De forma predeterminada, un <canvas> no tiene bordes ni contenido.
El marcado se ve así:
<canvas id="myCanvas" width="200" height="100"></canvas>
Nota: siempre especifique un atributo
id(al que se hará referencia desde JS) y un atributowidthyheightpara definir el tamaño del lienzo. Para agregar un borde, use el atributostyle.
Ejemplo:
Agrega JavaScript
Después de crear el área rectangular del elemento <canvas>, debes agregar código JavaScript para hacer el dibujo.
Dibuja una línea
Ejemplo:
Dibuja un círculo
Ejemplo:
Dibuja un texto
Ejemplo:
Dibuja un texto trazado
Ejemplo:
Dibuja un degradado lineal
Ejemplo:
Dibuja un degradado circular
Ejemplo:
Dibuja una imagen
Ejemplo:
Resumen
El elemento HTML <canvas> se utiliza para dibujar gráficos en una página web. Un elemento <canvas> es solo un contenedor para gráficos, debes usar JavaScript para dibujar los gráficos.
Traducido con 💚 desde W3Schools.com