01. Build a picture from squares.

A pixel is a color at a position. This image is just a 16 × 16 grid, magnified until the blocks are obvious. Tap a square to change it.

The code

We use fillRect to draw one pixel at a time. The browser scales the small canvas without blurring it.

const ctx = canvas.getContext('2d');
for (let y = 0; y < 16; y++) {
  for (let x = 0; x < 16; x++) {
    ctx.fillStyle = pixels[y][x];
    ctx.fillRect(x, y, 1, 1);
  }
}

Exercise: change the colors in makePicture(), then draw your initials in the grid.