Etiqueta HTML <canvas>
La etiqueta <canvas> es uno de los elementos HTML5. Define un área en la página web donde podemos crear diferentes objetos, imágenes, animaciones y composiciones fotográficas mediante scripts (generalmente JavaScript). Debes usar un script para dibujar gráficos, ya que la etiqueta <canvas> es solo un contenedor para gráficos.
Al trabajar con canvas, es importante distinguir entre conceptos como el elemento canvas y el contexto de un elemento, que a menudo se confunden. Este elemento es lo que está integrado en HTML (el nodo DOM). Un contexto de canvas es un objeto con sus propiedades y métodos para renderizar. El contexto puede ser 2D o 3D. El elemento canvas solo puede tener un contexto.
Se debe proporcionar un contenido alternativo dentro de la etiqueta <canvas> para que tanto los navegadores antiguos que no admiten canvas como los navegadores con JavaScript deshabilitado puedan mostrar ese contenido.
Por defecto, un elemento <canvas> tiene un tamaño de 300x150 píxeles.
Puedes usar CSS para cambiar el tamaño mostrado del canvas, pero es mejor especificar las dimensiones estableciendo los atributos width y height en <canvas>, ya sea directamente en HTML o mediante JavaScript.
Sintaxis
La etiqueta <canvas> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<canvas>) y cierre (</canvas>).
Ejemplo de la etiqueta HTML <canvas>:
Ejemplo de la etiqueta HTML canvas|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvasExample">Your browser doesn’t support the HTML5 canvas element.</canvas>
<script>
var c=document.getElementById('canvasExample');
var ctx=c.getContext('2d');
ctx.fillStyle='#1c87c9';
ctx.fillRect(10,50,80,80);
</script>
</body>
</html>Resultado
Ejemplo de la etiqueta HTML <canvas> utilizada para texto:
Etiqueta HTML <canvas>|Ejemplo de Canvas|W3Docs
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvasExample" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('canvasExample');
var context = canvas.getContext('2d');
context.font = '30pt Calibri';
context.fillStyle = '#1c87c9';
context.fillText('Canvas Example !', 50, 100);
</script>
</body>
</html>Ejemplo de la etiqueta HTML <canvas> utilizada para dibujar una línea:
Ejemplo de la etiqueta HTML <canvas> para dibujar una línea:
<!DOCTYPE html>
<html>
<body>
<canvas width="300" height="150" style="border:1px solid #cccccc;" id="canvasExample">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("canvasExample");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.strokeStyle='#1c87c9';
ctx.stroke();
</script>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
height | píxeles | Define la altura del elemento en píxeles. |
width | píxeles | Define el ancho del elemento en píxeles. |
La etiqueta <canvas> admite Atributos Globales y Atributos de Eventos.
Práctica
¿Cuáles son las características y usos de la etiqueta HTML <canvas>?