Drawing With Code: A Complete Guide to Making Art in Your Browser

Drawing with code is exactly what it sounds like: creating visual art by writing instructions that a computer executes. Instead of a brush, you have functions. Instead of a palette, you have numbers. And instead of a static canvas, you have a medium that can move, respond, and surprise you.

This guide covers everything you need to start drawing with code in your browser — no downloads, no installations, no experience required. By the end, you'll have created animated, interactive artwork using nothing but JavaScript and HTML.

Why draw with code?

Traditional art is subtractive — you start with a vision and try to manifest it. Coding art is exploratory — you start with a rule and discover what it produces. Change one number and your entire piece transforms. Add randomness and no two renders are the same. This is what makes drawing with code uniquely rewarding: the computer is your collaborator, not just your tool.

You don't need to be a programmer. You don't need to be an artist. You need curiosity and a browser.

Your first canvas drawing

Every browser has a built-in drawing surface called the Canvas API. Here's the minimal setup:

<canvas id="art" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('art');
const ctx = canvas.getContext('2d');

// Draw a circle
ctx.beginPath();
ctx.arc(300, 200, 80, 0, Math.PI * 2);
ctx.fillStyle = '#10b981';
ctx.fill();
</script>

That's it. You've drawn a green circle. The arc() function takes a center point (300, 200), a radius (80), and draws a full circle (0 to 2π radians). Every shape on Canvas works this way: you describe a path, then fill or stroke it.

From shapes to patterns

Drawing one circle is fine. Drawing a thousand is where it gets interesting. Loops are the secret weapon of code-based art:

for (let i = 0; i < 50; i++) {
  for (let j = 0; j < 50; j++) {
    const x = i * 12 + 6;
    const y = j * 12 + 6;
    const dist = Math.sqrt((x - 300) ** 2 + (y - 200) ** 2);
    const size = Math.max(1, 6 - dist * 0.02);

    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2);
    ctx.fillStyle = 'hsl(' + dist + ', 70%, 60%)';
    ctx.fill();
  }
}

This creates a grid of 2,500 circles where the size and color depend on distance from the center. One formula, thousands of unique dots, a pattern that would take hours to draw by hand. This is the power of algorithmic drawing — you define the rule, the computer draws the result.

Adding motion with animation

Static drawings are beautiful, but animated ones are alive. The key function is requestAnimationFrame:

let time = 0;

function draw() {
  ctx.fillStyle = 'rgba(10, 14, 23, 0.1)';
  ctx.fillRect(0, 0, 600, 400);

  for (let i = 0; i < 20; i++) {
    const angle = (i / 20) * Math.PI * 2 + time;
    const radius = 100 + Math.sin(time * 2 + i) * 40;
    const x = 300 + Math.cos(angle) * radius;
    const y = 200 + Math.sin(angle) * radius;

    ctx.beginPath();
    ctx.arc(x, y, 4, 0, Math.PI * 2);
    ctx.fillStyle = 'hsl(' + (i * 18 + time * 50) + ', 80%, 65%)';
    ctx.fill();
  }

  time += 0.02;
  requestAnimationFrame(draw);
}

draw();

Instead of clearing the canvas completely, we draw a semi-transparent rectangle each frame. This creates motion trails — a technique used in nearly all particle-based art. The circles orbit, breathe, and shift colors over time.

Making it interactive

The browser gives you mouse position, touch events, keyboard input, device orientation, microphone access, and more. Adding interactivity is often just one event listener away:

let mouseX = 300, mouseY = 200;
canvas.addEventListener('mousemove', (e) => {
  mouseX = e.offsetX;
  mouseY = e.offsetY;
});

Now use mouseX and mouseY in your drawing code. Replace the center point of your orbiting circles, use it as a gravity source, or let it control the color. The moment your art responds to you, it becomes a conversation.

Five techniques to explore

Once you have the basics, here are five directions to take your code-based drawings:

1. Particle systems

Create hundreds of objects with position, velocity, and simple rules. Particles can attract, repel, age, and die. They produce everything from fireworks to flocking simulations. The key: each particle is simple, but the collective behavior is complex.

2. Noise and flow fields

Perlin noise (or simplex noise) generates smooth randomness. Sample it across a grid to create a flow field — a vector at every point that tells particles which direction to move. The result: organic, river-like patterns that look hand-drawn.

3. Recursive and fractal drawing

A function that calls itself can draw trees, snowflakes, spirals, and coastlines. Start with a line, split it into two shorter lines at angles, and repeat. After 10 levels of recursion, you have a tree with 1,024 branches — from just 5 lines of code.

4. WebGL shaders

For advanced visuals, fragment shaders calculate the color of every pixel independently, running on the GPU. Signed distance functions let you describe 3D geometry as pure math — spheres, toruses, and boolean combinations — with lighting, shadows, and reflections, all in under 30 lines of GLSL.

5. SVG and CSS art

Not everything needs Canvas. SVG paths can be animated with CSS transitions. CSS gradients, blend modes, and keyframe animations can create aurora effects, geometric patterns, and abstract compositions with zero JavaScript.

Tools for drawing with code

You don't need any special tools — a browser and a text editor are enough. But these environments make experimentation faster:

• p5.js — The most beginner-friendly creative coding library. Wraps Canvas in intuitive functions like ellipse(), background(), and noise().
• Shadertoy — Write fragment shaders directly in the browser. See results instantly. The gallery is a masterclass in what shaders can do.
• Observable — Reactive notebooks where you can mix code, text, and live visuals. Great for iterating on ideas.
• Plain HTML files — The most portable option. Create an .html file, open it in your browser, and refresh to see changes. This is how every micro-world on Lumitree is built.

The creative coding community

Drawing with code is not a solitary activity. Thousands of artists share their work and techniques:

• #creativecoding and #generativeart on social media — daily inspiration from artists worldwide
• Genuary — An annual creative coding challenge in January with daily prompts
• Dwitter — Art in 140 characters of JavaScript (dwitter.net)
• Demoscene — A decades-old community pushing the boundaries of what code can render in minimal bytes
• Lumitree — A collaborative art tree where you describe what you want to see and it grows into a unique interactive micro-world

Start now

The best way to learn drawing with code is to start. Open your browser's developer console (F12), paste this, and press Enter:

document.body.innerHTML = '<canvas id="c"></canvas>';
const c = document.getElementById('c');
c.width = innerWidth; c.height = innerHeight;
c.style.cssText = 'position:fixed;top:0;left:0';
const x = c.getContext('2d');
let t = 0;
(function draw() {
  x.fillStyle = 'rgba(0,0,0,0.05)';
  x.fillRect(0, 0, c.width, c.height);
  for (let i = 0; i < 100; i++) {
    const a = i * 0.0628 + t;
    const r = 150 + Math.sin(a * 3 + t) * 80;
    const px = c.width/2 + Math.cos(a) * r;
    const py = c.height/2 + Math.sin(a) * r;
    x.fillStyle = 'hsl('+(i*3.6+t*30)+',80%,60%)';
    x.beginPath();
    x.arc(px, py, 3, 0, 6.28);
    x.fill();
  }
  t += 0.01;
  requestAnimationFrame(draw);
})();

You'll see a spiraling pattern of colored dots, breathing and rotating on your screen. That's your first code drawing. Now change a number — the 100, the 150, the 3.6 — and see what happens.

Every change is a discovery. Every discovery is a drawing. Welcome to creative coding.

Ready to see what others have created? Explore the micro-worlds on Lumitree — each one is a self-contained code drawing in under 50KB, or view the code demos with full source code you can copy and remix.