How to Build a Tiny Canvas Scene
A canvas element and a few lines of drawing code can hold a whole little world. We build it one shape at a time.
Canvas is just a sketchpad with coordinates
A canvas element is a rectangle you draw on with JavaScript. Every shape is a instruction: move here, draw a line there, fill it this color. Nothing persists between frames unless you redraw it.
That sounds fiddly, but it's freeing — you're not stacking divs, you're painting. A cloud, five raindrops, and a window frame can all live in one element.
Build the scene one shape at a time
Start with the background rectangle. Then add the cloud. Then one raindrop. Then four more. Each addition is a few lines, and you can see the scene growing as you go — no surprise reflows.
If you can't picture the finished scene yet, draw it on paper first. A labelled sketch turns into a coordinate plan in minutes.
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#E6EFFF";
ctx.fillRect(0, 0, 200, 180);
ctx.beginPath();
ctx.arc(60, 40, 18, 0, Math.PI * 2);
ctx.fill();
Animation is just redrawing
To make a raindrop fall, you clear the canvas and redraw everything with the drop a few pixels lower, about sixty times a second. A requestAnimationFrame loop handles the timing; you just update the numbers.
Five drops with five different starting offsets look like rain. Five drops in lockstep look like a barcode. The staggering is the whole trick.
When to pick canvas over CSS
Canvas earns its keep when something has many moving parts or needs pixel-level control — particles, a bouncing ball, a little game. For a single smiling face, CSS is still simpler.
More from the blog
Keep reading
CSS Art for Beginners: How to Think in Shapes
Before you write a single property, see your drawing as circles, ovals, and rounded rectangles stacked together. Once the shapes click, the CSS almost writes itself.
Pixel Art Basics for Front-End Developers
You already know grids and hex codes. Pixel art is just those, drawn one square at a time — no art degree needed.
Beginner Guide to p5.js Doodles
With just setup() and draw(), p5.js turns a blank canvas into playful motion. The gentlest on-ramp, one shape at a time.
Hands on
Want to try the idea?
Pick a spot to sketch it out — nothing you make here is permanent.