Key Technical Mechanics

1. CSS Grid Engine: The core of the canvas is display: grid. By using grid-template-columns: repeat(n, 1fr), we create a perfectly proportional grid regardless of how many columns the user chooses.

2. Continuous Painting: To simulate a "brush," we track a global isDrawing boolean. When mousedown triggers on a cell, it sets the boolean to true; as the mouse enters other cells (mouseover), they check that boolean to decide whether to apply the color.

3. The Export Pipeline: Since the grid is made of HTML <div> elements, we can't "save" it as an image directly. We recreate the artwork on a hidden <canvas> element. We loop through every div, read its background color, and draw a corresponding square onto the canvas context using ctx.fillRect().

Designing Pixel Art Effectively

When creating pixel art, remember these three core concepts:

• Resolution: Small grids ($16 \times 16$ or $32 \times 32$) are better for icons and character sprites, while larger grids allow for more complex shading.

• Palette Control: Limiting your colors often leads to a more cohesive "retro" look.

• Anti-aliasing (Manual): In pixel art, you don't have automatic blurring. To soften an edge, you manually place a pixel of an intermediate color between two high-contrast areas.

Pixel Art Maker

Create, paint, and export your 8-bit masterpieces.

Grid Size

Color