Dibujar una cuadrícula en canvas de HTML5

Hace poco tuve la necesidad de trabajar con canvas de HTML5 en un proyecto web, que si bien conocía, como desarrollador web freelance no había tenido la oportunidad de implementarlo en un proyecto. Una de las cosas que había que hacer era dibujar una cuadrícula sobre la que después posicionaría determinados elementos al hacer click en cada celda. Si bien no voy a entrar en la parte interactiva, he pensado que sería interesante ver paso a paso cómo hacerla por su utilidad para proyectos donde tengáis que crear algo similar.

Si estás aquí es porque ya sabes qué es, pero nunca viene mal hacer una breve introducción para ponernos en contexto. Una de las nuevas incorporaciones que hizo HTML5 fue añadir la etiqueta canvas al repertorio de las que se usaban tradicionalmente. Este nuevo elemento es un lienzo (de ahí su nombre en inglés) sobre el que podemos pintar usando algún lenguaje de programación, como es el caso de JavaScript y que veremos a continuación.

Vamos a crear nuestro lienzo en el lugar donde queramos que esté y para ello usaremos la etiqueta propia <canvas>. Definiremos su tamaño como si se tratara de una imagen y le atribuiremos un id para poder identificarlo desde nuestro script cuando lo creemos.

<canvas id="cuadricula" width="502" height="502"></canvas>

Al tratarse de un elemento de HTML podremos aplicarle estilos CSS como si manejáramos un div, controlando si queremos el tipo de posicionamiento, centrarlo, etc. Si le quieres añadir una clase también puedes hacerlo, tendrás flexibilidad en ese sentido. Una vez tengamos nuestro lienzo creado, es hora de ver el script que nos permitirá pintar una cuadrícula dentro, que como comenté antes estará programado en JavaScript. Nosotros vamos a ver solo el código, en ti está decidir si lo vas a incluir en el mismo archivo o lo vas a meter en un .js aparte.

Lo primero que haremos será declarar dos variables. En la primera, a la que llamaré canvas en un alarde de originalidad, almacenaremos el canvas usando un getElementById() y poniendo el id que le hayamos asignado previamente. En la segunda, a la que llamaré context, almacenaremos el canvas de nuevo pero indicando que su contexto de renderizado será en dos dimensiones, mediante el método getContext(). Y si te lo estás preguntando sí, lo establecemos en 2D porque podríamos usarlo para crear gráficos tridimensionales, pero en eso no vamos a entrar claro.

var canvas = document.getElementById("cuadricula");
var context = canvas.getContext("2d");

Una vez hemos preparado el canvas como necesitamos, tenemos que preparar el tipo de trazo a usar definiendo algunas de sus características. En este caso será negro context.strokeStyle = "#000000" y tendrá un grosor de 1 context.lineWidth = 1 (es el valor por defecto, pero lo especifico para que sepas cómo puedes cambiarlo). Comentar que 1 no equivale a 1px sino a 2px ya que la mitad del trazo se pinta en el interior de la posición en la que estemos y la otra mitad en el exterior. Es decir, un píxel a cada lado y da como resultado que el grosor sea de dos píxeles. Hay un modo de hacer que el trazo mida 1px real, pero es necesario hacer unos cálculos adicionales y no quiero hacer más compleja la demostración, quizá más adelante aborde el tema en otro artículo porque hay tema para ampliar información.

context.lineWidth = 1;
context.strokeStyle = "#000000";

Ahora pasamos a crear los trazos que definirán nuestro dibujo. Como una cuadrícula está compuesta por columnas y filas, lo que vamos a hacer es pintar líneas horizontales (eje x) y verticales (eje y). Para hacerlo usaremos dos bucles for cuyas expresiones serán:

• Posición inicial declarando la variable x o y según el eje. Verás que la inicio en 1 porque como comentaba antes el trazo que usaremos será de 2px y si partimos de 0 se verá solo la mitad.
• Condición que verificará que no nos pasemos de ancho o alto. Nuestro canvas mide 502 para que quepán la primera y última línea así que el bucle se ejecutará siempre que x o y sea menor.
• Incrementador de la posición con cada iteración. En el ejemplo pintaremos una línea cada 100px, lo que dará lugar a 5 filas y 5 columnas.

for (var x = 1; x < 502; x += 100) {
  Haz algo...
}
for (var y = 1; y < 502; y += 100) {
  Haz algo...
}

Ahora debemos indicar dentro de los bucles a qué punto del canvas queremos movernos con moveTo() para que sea el punto de origen del trazo. Y a continuación pintaremos una línea desde el punto anterior hacia uno nuevo con lineTo(). Ambos métodos requieren introducir las coordenadas x e y en este orden y separadas por una coma. En resumen lo que vamos a hacer es indicar mediante coordenadas dónde debe empezar y dónde acabar una línea. El resultado al ir dentro de los bucles será que en el primero pintaremos una a una cinco líneas verticales sumando a la coordenada x 100px con cada iteración hasta que la condición de ser menor que los 502px del canvas deje de cumplirse. En el segundo blucle haremos lo mismo pero pintando líneas horizontales, al ir sumando esos 100px a la coordenada y en este caso.

for (var x = 1; x < 502; x += 100) {
  context.moveTo(x, 0);
  context.lineTo(x, 502);
}
for (var y = 1; y < 502; y += 100) {
  context.moveTo(0, y);
  context.lineTo(502, y);
}

Pero hasta ahora solo hemos calculado por dónde irán los trazos, para que estos se revelen como de tinta se tratara debemos usar un método más que es stroke() y podremos ver nuestra cuadrícula dibujada sobre el canvas de HTML. Todo el script completo quedaría como puedes ver a continuación y tal cual se pintará inmediatamente al cargar el DOM, pero si necesitas que la cuadrícula se dibuje al desencadenarse un evento determinado (como pulsando un botón por ejemplo) puedes meterlo en una función.

var canvas = document.getElementById("cuadricula");
var context = canvas.getContext("2d");

context.lineWidth = 1;
context.strokeStyle = "#000000";

for (var x = 1; x < 502; x += 100) {
  context.moveTo(x, 0);
  context.lineTo(x, 502);
}
for (var y = 1; y < 502; y += 100) {
  context.moveTo(0, y);
  context.lineTo(502, y);
}

context.stroke();

Este es el resultado final, te dejo el proyecto completo para que puedas trastear el código si quieres por las diferentes pestañas e incluso editarlo en tiempo real desde mi CodePen. Y si tienes cuenta, puedes guardar el proyecto para revisarlo más adelante, hacer un fork o darle amor si te ha sido útil.

See the Pen Dibujar una cuadrícula en canvas de HTML5 by Jesús Tovar (@jesustovar) on CodePen.

Es importante que tengas en cuenta que vas a pintar en unas dimensiones determinadas, eso significa que a efectos prácticos este lienzo será un objeto basado en mapas de bits (vamos como un jpg) y no vectorial, por lo que pixelará si lo escalamos. Esta problemática tendrás que resolverla a través de programación si necesitas adaptar el canvas a diferentes resoluciones de pantalla.

Si estás interesado en ampliar un poco más tus conocimientos, te invito a que le des un vistazo a este otro artículo que sirve de introducción a cómo dibujar en canvas de HTML usando JavaScript.