Code Art / Workshop

Draw with code.

A tiny workshop for turning code into pictures. No framework, no drawing software, no complicated setup. The examples run inside an ordinary browser.

Start with one square.

Draw it. Move it. Add a thousand more. Congratulations, you have graphics.

01 / PIXEL GRID

Make a picture from a small matrix of colored squares.

Run lesson 01 →

02 / SCENERY

Draw a landscape with shapes, gradients, and an algorithm.

Run lesson 02 →

03 / ANIMATION

Move a satellite using time and the animation loop.

Run lesson 03 →

THE BASIC IDEA

Every pixel-based image begins with positions and colors. In the Canvas API, you can fill one square with one command:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#1eaec8';
ctx.fillRect(20, 20, 8, 8);

fillRect(x, y, width, height) paints a rectangle. Repeat the command at different positions and you have pixel art. The lesson pages show the full source so you can change it.

This site also includes a separate owner guide with copyable lesson files, exercises, explanations of sprites, and instructions for creating your own artwork.