dibujar.js

/*
	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;
}