Art Studio — free online drawing, colouring and animation tool

How to draw and animate online, free

Art Studio is a drawing and animation tool that runs entirely inside your browser. There is nothing to install, no account to make, and nothing you draw is ever uploaded to a server. It works on a laptop with a mouse, on a tablet with a stylus, and on a phone with your finger.

The four modes

Draw is a straightforward sketching canvas with pencil, ink pen, marker and crayon brushes. Each brush behaves differently: pencil gives a light, textured line good for roughing out shapes, while ink pen lays down a solid, consistent stroke better suited to finished outlines.

Colour in turns a line drawing into something you can fill. Useful if you have outlines you want to shade without worrying about going over the edges.

Animate is where the frame-by-frame work happens. Add a frame, draw the next position, and repeat. The faint ghost of the previous frame stays visible behind your current one so you can line movement up accurately.

What onion skinning is, and why it matters

Onion skinning is the single most useful feature if you are animating. It shows a semi-transparent copy of the previous frame underneath the one you are drawing, so you can see exactly how far something has moved. Traditional animators worked this way for decades using translucent paper on a lightbox, and the principle has not changed.

Without it you are guessing at spacing between frames, and the result tends to jitter. With it, you can keep a walk cycle or a bouncing ball consistent. The onion skin slider controls how strongly the previous frame shows through, so turn it up while blocking out rough movement and down when you are adding detail.

Making your first animation

1. Start simple. A ball bouncing is the classic first exercise because it teaches timing and spacing without needing drawing skill.
2. Draw your first frame, then press Add to create the next one. The previous drawing appears faintly behind it.
3. Move the object a little, not a lot. Small changes between frames give smooth motion. Large jumps look choppy.
4. Use Copy when the next frame is mostly the same as the last one, then adjust only what moves.
5. Set your speed. Eight frames per second is a good default for hand-drawn work; twelve feels smoother but needs more drawings.
6. Press Play to check the loop, then export as a WebM video when you are happy.

Timing: fewer frames than you think

A common mistake is drawing too many frames. Much traditional animation is made "on twos", meaning each drawing is held for two frames of video. At 24 frames per second that means twelve drawings per second rather than twenty-four, and the eye reads it as perfectly smooth. Starting at eight frames per second here keeps the workload sane while you learn.

Exporting your work

Animations export as WebM video, which uploads directly to YouTube, Instagram and TikTok, and plays in Chrome, Edge, Firefox and VLC. Single frames can be saved as PNG. One thing to know: recording captures the canvas as it plays, so keep the tab visible until it finishes. Browsers deliberately pause animation in background tabs to save battery, which would leave you with a stalled recording.

Your work stays on your device

Everything here is computed by your own browser. No drawing, frame or exported video is transmitted anywhere. That also means we cannot recover your work if you close the tab without exporting, so save anything you want to keep.