Dibujar arreglo en Canvas de JavaScript

Dibujar arreglo en canvas con JavaScript

En este artículo de programación te mostraré cómo pintar o dibujar un arreglo (array, vector, como lo conozcas) en un canvas de JavaScript, logrando hacer una cuadricula.

Es decir, a partir de una matriz en JavaScript, dibujar una cuadricula en Canvas. Esto es útil por ejemplo al hacer un juego como snake, pues si tratamos todo como un arreglo, podemos desarrollar el juego en el mismo y luego solo pintar la matriz en el canvas.

Dibujar cuadrado en canvas

Para dibujar un simple rectángulo, podemos usar fillRect una vez obtenido el contexto del canvas. La sintaxis es:

contexto.fillRect(x, y, ancho, alto);

Como nosotros vamos a dibujar una cuadricula, el ancho y el alto serán el mismo. Lo que va a cambiar será x e y que iremos modificando dentro del ciclo que dibujará la matriz en el canvas usando JavaScript.

Por cierto, te invito a ver cómo dibujar figuras en Canvas en caso de que quieras profundizar en el tema.

Declarando matriz

Vamos a dibujar una matriz en canvas, así que necesitamos un arreglo de arreglos. Para hacer esto más interesante, el color estará definido dentro de cada elemento del arreglo (además del color, podemos especificar más propiedades, pero eso es otra historia) el cual es un objeto.

const cuadricula = [
    [{ color: "#eaeaee" }, { color: "#dddffa" }, { color: "#aaffff" }],
    [{ color: "#00ffff" }, { color: "#11ff22" }, { color: "#001122" }],
    [{ color: "#66bbcc" }, { color: "#aa44aa" }, { color: "#aaffbb" }],
    [{ color: "#281196" }, { color: "#ffdffa" }, { color: "#210697" }],
    [{ color: "#eaeaee" }, { color: "#ff00ff" }, { color: "#ffeeff" }],
];

Vamos a dibujar esa matriz usando JavaScript.

Dibujando matriz

Veamos el código HTML; declaramos un canvas vacío con el id canvas:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Dibujar arreglo en canvas (cuadrícula) - By parzibyte</title>
  </head>
  <body>
  <h1>Dibujar arreglo en Canvas</h1>
  <a href="https://parzibyte.me/blog">By Parzibyte</a>
  <br><br>
  <canvas width="500px" height="500px" id="canvas"></canvas>
    <script src="script.js"></script>
  </body>
</html>

Luego, dentro del script recorremos la fila, dentro de la fila el cuadrado y vamos pintando. Si te fijas tenemos unos ayudantes de x e y que van aumentando o reiniciando de acuerdo al paso del ciclo:

/*
 https://parzibyte.me/blog
*/const cuadricula = [
    [{ color: "#eaeaee" }, { color: "#dddffa" }, { color: "#aaffff" }],
    [{ color: "#00ffff" }, { color: "#11ff22" }, { color: "#001122" }],
    [{ color: "#66bbcc" }, { color: "#aa44aa" }, { color: "#aaffbb" }],
    [{ color: "#281196" }, { color: "#ffdffa" }, { color: "#210697" }],
    [{ color: "#eaeaee" }, { color: "#ff00ff" }, { color: "#ffeeff" }],
];
const $canvas = document.querySelector("#canvas");
const contexto = $canvas.getContext("2d");
const MEDIDA_CUADRO = 100;

// Comenzar a dibujar
// x e y nos van a ayudar a dibujar usando las medidas de pixeles
let y = 0, x = 0;
for (const fila of cuadricula) {
    x = 0;
    for (const cuadro of fila) {
        // Indicamos el color que usaremos
        contexto.fillStyle = cuadro.color;
        // Y creamos el rectángulo en la posición X con Y, usando la misma altura y anchura
        contexto.fillRect(x, y, MEDIDA_CUADRO, MEDIDA_CUADRO);
        x += MEDIDA_CUADRO;
    }
    y += MEDIDA_CUADRO;
}

En la línea 11 obtenemos el canvas usando querySelector. Cada cuadro mide 100 pixeles en ambos lados. La salida es:

Dibujar arreglo en canvas con JavaScript

Ahora podríamos actualizar o modificar la matriz, y volver a dibujar cada determinado tiempo, dando la ilusión de que los cuadros se mueven o cambian de lugar.

He hecho este tutorial porque hace unos días terminé de crear el juego de tetris en JavaScript, en donde utilizo una matriz con puntos y coordenadas, así que el principio parte de esto que demuestro aquí.

Aquí puedes leer más sobre JavaScript, si quieres.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/