No veas tú el lío de etiqueta que vamos a ver hoy. Hoy toca hablar de la etiqueta Canvas de HTML y es posible que te explote la cabeza cuando descubras cómo funciona.
Es bastante más complicado que todas las etiquetas que hemos visto hasta ahora.
Como verás a continuación, este elemento de HTML tiene una dificultad añadida. Pero bueno, no quiero adelantar acontecimientos.
Simplemente recordarte que este post forma parte de la serie de «El diccionario HTML» donde vemos cada una de las etiquetas de este lenguaje.
Como esto lleva un curro que flipas, agradezco mucho que me dejes cualquier comentario más abajo (puedes poner lo que quieras) :D.
Y ahora, vamos con la lección.
¿Qué hace la etiqueta canvas en HTML?
Muy bien, lo primero, ¿Qué es la etiqueta Canvas? ¿Qué hace esta etiqueta en HTML?
Para ponernos un poco en contexto, es necesario saber que «Canvas» en inglés significa «Lienzo».
Y con un poquito de imaginación, ya podríamos adivinar para qué sirve esta etiqueta.
La etiqueta Canvas en HTML sirve de lienzo para dibujar gráficos (y más cosas) mediante scripting. Normalmente se utiliza JavaScript y aquí es cuando la cosa se complica.
Ojo, porque básicamente proporciona un espacio donde puedes escribir y dibujar gráficos, crear imágenes, hacer juegos y cualquier otra cosa en 2D e incluso en 3D con la ayuda de estándares como WebGL.
Pero bueno, no te preocupes si parece algo muy lioso (que realmente es bastante lioso).
Ejemplo de cómo utilizar CANVAS en html
Vamos a ver un ejemplo para que veas cómo funciona exactamente esta etiqueta.
Aquí lo que hemos hecho es, dentro del body, hemos puesto una etiqueta Main y dentro de la etiqueta Main hemos utilizado una etiqueta Canvas porque queremos dibujar algo.
Hemos creado la etiqueta Canvas con una ID que se llama «Canvas».
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Canvas Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid black;"></canvas>
</main>
<script src="script.js"></script>
</body>
</html>Esto es importante porque luego llamaremos a este ID para crear lo que es el lienzo.
Hemos creado una serie de atributos para darle estilos. Esto se puede hacer con estilos CSS.
Por eso, tenemos creado aquí una hoja de estilos con unos pequeños estilos para darle forma.
body{
margin: 0;
padding: 0;
background: #222;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas{
background-color: #fff;
border: 2px solid #222;
}
Además, tenemos un documento de JavaScript donde tenemos todo el código JavaScript centralizado para empezar a utilizar nuestra etiqueta Canvas y empezar a dibujar, hacer gráficos, escribir o lo que queramos.
// Obtener el elemento canvas y su contexto 2D
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Dibuja un rectángulo
ctx.fillStyle = 'red'; // Establecer el color de relleno a rojo
ctx.fillRect(50, 50, 150, 100); // Posiciona y dimensiona el rectángulo
// Dibuja un círculo
ctx.beginPath(); // Iniciar un nuevo trazo
ctx.arc(300, 200, 20, 0, 2 * Math.PI); // Definir un arco (círculo en este caso)
ctx.fillStyle = 'green'; // Establecer el color de relleno a verde
ctx.fill(); // Rellenar el círculo
ctx.strokeStyle = 'black'; // Establecer el color de contorno a negro
ctx.stroke(); // Dibujar el contorno del círculo
En este caso, lo que hemos hecho es un cuadrado de color rojo. Este es un ejemplo muy básico y simple para que veas cómo funciona.
Pero si aún no está muy claro, he creado otro ejemplo (vease en el vídeo). En el siguiente ejemplo le hemos dicho que dibuje un círculo.
Además, he puesto lo que hace cada línea para la gente que no somos unos especialistas en JavaScript.
Así podríamos ir jugando con los parámetros y se iría moviendo o agrandando el círculo, dependiendo de lo que queramos.
Consejos Etiqueta Canvas
Algunos consejos para utilizar esta etiqueta canvas. Porque a veces se puede hacer un poco cuesta arriba al principio (y no tan al principio).
Definir Dimensiones
Es preferible definir el ancho (width) y alto (height) del canvas directamente en el atributo del elemento y no mediante CSS.
Optimización de Rendimiento
Si estás realizando animaciones o juegos con muchos frames por segundo, considera usar requestAnimationFrame en lugar de setTimeout o setInterval.
Esta función permite que el navegador controle el ciclo de animación y optimice el rendimiento.
Uso de Bibliotecas
Si planeas crear gráficos o funcionalidades complejas, considera usar bibliotecas como p5.js, Three.js (para 3D), o PixiJS.
Estas herramientas simplifican muchas tareas y mejoran la compatibilidad entre navegadores.
Guardado de Estado
Utiliza ctx.save() y ctx.restore() para guardar y restaurar estados del contexto.
Esto es útil si estás cambiando muchas propiedades del contexto (como colores, transformaciones, etc.) y quieres volver a un estado anterior sin tener que resetear todo manualmente.
Detección de Eventos
Si deseas hacer que las formas en el canvas sean interactivas (por ejemplo, hacer clic en un círculo), debes implementar tu propio sistema de detección de colisiones o usar una biblioteca que proporcione esa funcionalidad.
Backup y Exportación
La etiqueta canvas te permite exportar su contenido como una imagen (por ejemplo, en formato PNG) usando canvas.toDataURL()
Esto es útil para funcionalidades de guardado o compartición.
Conclusión
Sí, lo sé, y ya te lo he dicho.
Esta es probablemente una de las etiquetas más difíciles de utilizar en HTML, básicamente porque tenemos que emplear JavaScript.
Y si no sabes JavaScript, pues la verdad es que lo tienes un poco complicado.
Pero bueno, como has visto, se pueden hacer cosas simples y también cosas más complejas e interesantes.
Por ejemplo, podríamos hacer una aplicación para que los usuarios pudieran hacer gráficos, dibujar o hacer cualquier cosa en un lienzo.
En fin, si te animas a utilizar esta etiqueta, ya me dirás qué tal te ha ido 😀
Te deseo toda la suerte del mundo (es broma) y recuerda que si te ha gustado el post, puedes dejarme en los comentarios un saludito (o algo).
Nos vemos en el próximo vídeo. ¡Adiós!