Hace algún tiempo traté en este blog cómo dibujar una cuadrícula en canvas de HTML utilizando JavaScript, ya que como desarrollador web freelance había tenido la necesidad de integrarlo en un proyecto. Desde entonces, he seguido trabajando con esta metodología en varias ocasiones más, por eso he pensado que podría ser interesante profundizar un poco más en este tema, dado el potencial que tiene usarla.
Con la premisa anterior, en esta ocasión quiero hacer un artículo más introductorio que el anterior, donde vamos a ver cómo dibujar en el elemento canvas de HTML utilizando JavaScript.
¿Qué es canvas de HTML?
Antes de comenzar sería buen momento para repasar brevemente qué es esta etiqueta, aunque en su momento ya la traté al hablar de las nuevas etiquetas de HTML5. Puedes darle un vistazo rápido a ese otro artículo si te estás introduciendo en el mundo del desarrollo web y luego regresar para continuar, te será muy útil.
El componente <canvas> de HTML proporciona un espacio en el que podemos dibujar con lenguajes de programación como JavaScript. Este elemento se asemeja a un lienzo en blanco (de ahí su nombre en inglés), ofreciendo la posibilidad de trazar figuras, líneas, gráficos, hacer animaciones e incluso desarrollar juegos completos, por qué no. Su versatilidad brinda opciones casi infinitas, constituyendo una herramienta moldeable según nuestros deseos.
Si ya tenemos claro el concepto, podemos empezar a preparar los elementos que nos permitirán generar gráficos. Vamos a verlo todo paso a paso con algunos ejemplos prácticos que nos ayudarán a iniciarnos en la tarea.
Dibujar en canvas
Como te podrás suponer, si ya cuentas con conocimientos de JavaScript o de programación, todo te resultará más sencillo. Por eso te recomiendo que si no los tienes, te tomes antes un momento para aprender también al menos los aspectos básicos con algún cursillo. Si quieres realmente sacarle partido al elemento canvas, será imprescindible para hacer cosas complejas. Sigamos pues.
Antes de entrar en faena, piensa que las formas en canvas se trabajan con trazos y rellenos, como podría suceder en los programas de diseño. Los trazos tiene grosor y color, los rellenos también tienen color, pudiendo usar tonos sólidos, degradados e incluso elaborar patrones. El trazo puede aplicarse a cualquier cosa que dibujemos, pero para usar un relleno, la forma debe estar cerrada o no se pintará correctamente.
Creando el lienzo en HTML
Lo primero que debemos hacer es crear el lienzo en HTML. Esto se hace utilizando la etiqueta <canvas> reservada para este propósito en el body del documento. A ésta le añadiremos un id para identificarla después dentro de nuestro código. Después incluiremos el script que crearemos más adelante, en este caso lo incluyo en el ejemplo en forma de archivo aparte para que sea más sencillo de entender, pero puedes meterlo directamente dentro del mismo documento si así lo prefieres.
<body>
<canvas id="lienzo" width="500" height="500" style="border:1px solid #000000;"></canvas>
<script src="canvas-javascript.js"></script>
</body>En el ejemplo anterior, he creado un <canvas> con un tamaño de 500×500 píxeles y un borde negro para que puedas verlo bien. Le he añadido los estilos directamente en línea, pero puedes asignarle una clase sin problema o usar el id y manipular desde CSS sus propiedades como en cualquier otro elemento.
Dando contexto con JavaScript
Es el momento de crear el archivo que contendrá la magia JavaScript. Necesitamos obtener el contexto del canvas para empezar a dibujar. El contexto le indica al motor de renderizado del navegador cómo deberá interpretar las instrucciones que le daremos después. Y es que podemos usar el lienzo con un contexto para trabajar con gráficos en 2D, pero también en 3D y el enfoque no es el mismo. Incluso hay un contexto que podríamos usar para trabajar con mapas de bits. En cualquier caso nosotros nos vamos a centrar en dibujar en 2D que es más sencillo para empezar.
// canvas-javascript.js
document.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById('lienzo');
var context = canvas.getContext('2d');
});Dibujando un cuadrado
Definido el contexto, vamos a empezar con algo simple como puede ser un cuadrado. Con beginPath indicamos que vamos a crear una nueva forma, usando después la propiedad fillStyle podemos especificar el color de relleno de la forma y con fillRect decimos que queremos pintar un rectángulo.
// canvas-javascript.js
document.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById('lienzo');
var context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = 'blue';
context.fillRect(200, 200, 100, 100);
});Si te fijas, en este caso el color de fondo es azul, las coordenadas x e y donde se empieza a pintar son 150 – 200 respectivamente y el tamaño 100x200px. Una aclaración, utilizar beginPath es imprescindible si queremos dibujar más de una forma en el mismo lienzo, pero si sólo crearemos una no es necesario incluirlo.
See the Pen Dibujar cuadrado en canvas de HTML con JavaScript by Jesús Tovar (@jesustovar) on CodePen.
Dibujando un círculo
Ahora vamos a ver cómo dibujar un círculo. Usando la propiedad arc que sirve para dibujar arcos, podemos definir primero las coordenadas x e y del centro, como en el caso del rectángulo. Después le asignamos un radio, el ángulo en el que queremos iniciar el arco y después el de finalización. En esta ocasión vamos a aplicarle un contorno con un trazo (strokeStyle) y rellenamos de color por último.
// canvas-javascript.js
document.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById('lienzo');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(250, 250, 100, 0, Math.PI * 2);
context.strokeStyle = 'red';
context.stroke();
context.fillStyle = 'blue';
context.fill();
});Aquí context.arc dibuja un círculo azul con el centro en 250 – 250 del lienzo y un radio de 100 píxeles. Iniciamos en el ángulo 0 y para calcular dónde finaliza usamos la fórmula Math.PI * 2. Luego hemos añadido un trazo rojo alrededor, que forzamos a pintarlo con stroke.
Si te has fijado, en esta ocasión el color se lo tenemos que dar después de haber definido los parámetros del círculo y usamos fill para forzar a que lo rellene. Esto es porque de entrada, arc no crea una forma cerrada como fillRect, ya que puede usarse para dibujar arcos abiertos.
See the Pen Dibujar círculo en canvas de HTML con JavaScript by Jesús Tovar (@jesustovar) on CodePen.
Dibujando una línea
Vistas las dos figuras geométricas más sencillas, es el momento de dibujar una línea. Las líneas son útiles para realizar figuras más complejas, conectando unas líneas con otras. En este caso usando moveTo especificamos los ejes x e y desde donde partir, para después especificar con lineTo dónde queremos acabar. Agregamos color y grosor con lineWidth a la línea si queremos.
// canvas-javascript.js
document.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById('lienzo');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 100);
context.lineTo(400, 400);
context.lineWidth = 2;
context.strokeStyle = 'green';
context.stroke();
});Estas instrucciones crean una línea verde desde el punto 100 – 100 hasta el punto 400 – 400. Además le hemos dado un grosor de 2 al trazo. Si quisiéramos continuar la línea, podríamos seguir dándole instrucciones de eje en eje. Si por el contrario queremos añadir más líneas pero que no estén conectadas con la anterior, aplicando beginPath al comienzo de cada una podrás añadir cuantas quieras.
See the Pen Dibujar una línea en canvas de HTML con JavaScript by Jesús Tovar (@jesustovar) on CodePen.
Un poco de animación
Si bien con los ejemplos anteriores quedaría cumplido el objetivo de introducirte al dibujado en canvas, no me puedo resistir a darle un poco de animación para que puedas ver el potencial. No obstante, más adelante crearé otro artículo específico para ver cómo en concreto se anima. Ahora vamos a hacer que ese círculo se mueva un poco.
// canvas-javascript.js
document.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById('lienzo');
var context = canvas.getContext('2d');
var x = 250;
var y = 250;
var dx = 2;
var dy = 2;
var radius = 50;
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2);
context.fillStyle = 'blue';
context.fill();
context.stroke();
if(x + radius > canvas.width || x - radius < 0) {
dx = -dx;
}
if(y + radius > canvas.height || y - radius < 0) {
dy = -dy;
}
x += dx;
y += dy;
}
setInterval(draw, 15);
});Este script anima un círculo azul que rebota dentro del canvas usando, setInterval para llamar a la función draw cada 15 milisegundos. Con esto conseguimos simular movimiento, de un modo similar a los fotogramas de una animación.
See the Pen Animar un círculo en canvas de HTML5 con JavaScript by Jesús Tovar (@jesustovar) on CodePen.
Como ves, esto abre la puerta a muchas posibilidades en las que se puede incorporar esta metodología.
Resumiendo
Si has llegado hasta aquí enhorabuena, ahora sabes cómo dibujar en canvas de HTML5 usando JavaScript. No te voy a engañar, manejar bien esta herramienta requiere un cierto grado de complejidad, pero imagina lo que podrías crear con más práctica y creatividad.
Ésto ha sido sólo el comienzo pero el límite lo pones tú. Abajo te dejo algunos recursos que puedes consultar para ampliar información y seguir aprendiendo. Espero que este artículo te haya sido útil y si tienes alguna pregunta, no dudes en dejarla en los comentarios.
Referencias:
- El elemento canvas (inglés) – WHATWG
- CanvasRenderingContext2D – Recursos para desarrolladores de Mozilla
Deja una respuesta