Pressure-sensitive ink line. Tapers at start and end.
Pencil (N)
Lighter touch (85% opacity) and the most tilt-responsive brush — lean it over for a broader stroke. Good for sketching.
Marker (M)
Wide, near-uniform stroke — barely tapers, so it stays solid end to end.
Highlighter (H)
Wide semi-transparent stroke in multiply mode. No taper and no pressure response, so a pass stays even — and it doesn't double-darken at joins.
Eraser (E)
Erases only the active layer. Opacity and size apply.
Shapes
Line, rectangle, ellipse (L/R/O), plus arrow from the palette or the right-click menu. Drag to draw; hold Shift to constrain.
Custom brushes
Tune & save your own with the + in the tool palette (right-click a custom brush to edit or delete).
Select (V)
Marquee strokes across every visible, unlocked layer, then move (drag), scale (corner handles), rotate (top handle), or Delete. Hold Alt to lasso instead; Esc drops the selection back into place.
Text (T)
Click on the canvas to place a text box. Enter commits, Escape cancels, Shift+Enter inserts a new line. Double-click an existing text element to re-edit it.
Brush controls
Use the size slider or [ ] keys to adjust brush size. Use the opacity slider to control stroke transparency.
Apple Pencil tip: Pressure controls line width. Tilt broadens strokes. Rest your palm freely — palm rejection is active.
Color
Swatch
Click the color swatch to open the HSV picker (hue, saturation/value, hex, recents).
Eyedropper (I)
Click the eyedropper, then click the canvas to sample a color.
Palette
Click a swatch to use it; hold (or right-click) any cell to save the current color there.
Recolor
Change colors that are already down, without repainting them. A recolor layer sits above your work and re-maps what shows through it, so nothing is baked and you can re-tune or switch it off at any time. It is two masks multiplied together: the area mask (step 1 — where on the canvas it may land, the marching ants) and the color mask (step 2 — which colors are caught inside that area). The panel runs top-to-bottom in the usual order — Select area fills both masks in one drag — but every step works alone and in any order. No area mask means the whole canvas, and Erase or Deselect then cut areas out of that full coverage directly.
Open it (K)
The Recolor icon on the dock rail (right edge), the palette icon in the tool palette, or the recolor button in the Layers header. Opening the panel creates the recolor layer for you; if you close it again without changing anything, the layer quietly goes away.
Eyedropper
Click a color on the canvas to pick it, or drag to collect every color you cross — one gesture, no separate mode. The cursor becomes a dropper and a loupe shows the exact color under the tip. It stays armed so you can keep collecting; Esc when done. Click a chip to drop that color; no chips at all means “everything”. Holds up to 48 colors — a pick that lands within an existing chip's cluster folds into it rather than adding a duplicate (a click that folds says so).
Fuzziness
How far from the picked colors the change reaches. Low catches just that shade; high pulls in neighbouring ones. The edge of the range fades rather than cutting off. It governs the area brush and flood too — they only move colors inside the color mask, widened by this slider.
Preview match
Hold ⌥, the Preview button, or just drag the Fuzziness slider, to light up exactly what the recolor will actually change: the color mask inside the area mask. Everything that will not change dims, and the range's soft edge reads as partial dimming. A dim, not a tint, for the same reason the ants are an outline: a color laid over the picture would be indistinguishable from the recolor you are judging. Computed against the layers below the recolor, so its own output can't fool it. (⇧'s sibling: ⇧ asks "is this better?", ⌥ asks "what am I catching?")
Hue / Sat / Bright
Shift everything in range together. Because it is a shift and not a fill, colors keep their relationships — light stays lighter than dark. Double-click a slider to zero it.
Shift vs Absolute
Shift rotates every matched color by the same amount, so an object that was several hues stays several hues. Absolute pins them all to one hue and keeps each pixel's own saturation and lightness — "same garment, different dye", for when you want an exact color rather than a relative move. Neither is a fill: the shading a fill would flatten is what both of these preserve.
Recoloring one thing — say a blue swimsuit, red:
1 · Old color
Click the left chip under New color (step 3 of the panel), then drag the eyedropper along the suit — across the deep shadow, the mid tone and the pale sheen. That captures the whole material, not one pixel of it.
2 · New color
Click the right chip to open the color picker and choose the red you want. The shift between the two is worked out for you (the old color lands exactly on the new one).
3 · Paint
Press Paint and brush over the suit. Every blue in range moves to the matching red — shadows become dark red, highlights become light red — so the shading survives. The pool behind stays blue simply because you did not brush it.
Erase
Brush back over anything you overshot to take it out again. Clear removes all paint (back to the whole canvas); Invert flips it to everywhere you did not brush.
Like a layer mask
Select the recolor layer in the Layers panel and the ordinary tools apply to it: any brush paints the effect in, the eraser (E) takes it back out so the untouched layers below show through — at your usual brush size, with Pencil pressure.
Select area
Drag across an object and it takes both the colors you cross and the connected area they form — one swipe down a swimsuit takes the whole suit, shadows and all, while the same blue in the pool behind it is left alone (it is not reachable without crossing something that is neither). Drag again to add another area; hold ⌥ (or use Deselect area) to flood one back out.
Edge stop
How sharp a color step counts as a boundary the flood must not cross. Turn it down if the selection will not spread across shading; up if it leaks.
Reach
How far the flood may travel from where you dragged. Distance is measured through matching pixels, so going around a bend costs what it should.
Show area
The eye on the panel's Coverage line puts marching ants around what is covered, so you are not guessing. An outline rather than a tint or hatching: anything laid over the picture competes with the edit you are judging, and in a recoloring app a colored film is indistinguishable from the recolor itself. Hold ⇧ for a before / after: the recolor you are editing drops away while the key is down, with the same ants still outlining the selection, so the boundary holds still and only the color changes. On automatically whenever a recolor mode is armed. Fuzziness, Edge stop and Reach all re-run the last selection live — dial them while watching it.
Hardness
The Paint/Erase brush's edge. 100% stamps a hard round dab (the old behavior); lower feathers each dab from an opaque core to nothing at the rim, so a brushed recolor blends into its surroundings instead of butting. Drawing on the layer with the ordinary brushes keeps their own edges.
Grow / Shrink / Feather
Reshape the selection after you have made it — push the edge out or in, or soften it so the transition is gradual rather than a hard line.
Copy / Export mask
Hand the selection to another tool as a black-and-white PNG — white is where an inpainting model may repaint. Also on the workspace-tab Export menu. Inpainting usually wants the mask a few pixels proud of the object with a soft edge, which is what Grow and Feather are for.
Retouching before a re-generate
Clone stamp (G)
⌥-click to set a source point, then paint: it copies texture from there to where you brush. For removing a detail you don't want, this beats painting over it — a flat blob has a crisp edge that an image model tends to read as an object and re-render, whereas cloned texture reads as nothing in particular.
Blur (U)
Smears the area instead of replacing it. Same purpose, less setup.
Where it lands
Both paint into a Retouch layer — the only raster layer in the app, since copied pixels can't be stored as strokes. Everything under it stays vector and editable.
Canvas
Extend (outpaint)
Settings ▸ Extend canvas grows the artboard on the sides you choose, leaving empty margin for an outpainting pass to fill. The picture doesn't move or stretch — it just gains room.
Crop to selection
Select something (V), then Settings ▸ Crop to selection.
Works on photos too: the recolor reads pixels, so it treats an imported image exactly like a stroke — but your strokes stay vector and fully editable underneath. Right-click the layer ▸ Bake into image when you want it made permanent. (PNG export keeps recolors; SVG export cannot represent them.)
Layers
Blend mode
Pick a blend (multiply, screen, overlay…) from the dropdown under the active layer.
Duplicate
The duplicate button on a layer row copies it (strokes and blend mode) above the original.
Reference
Import a photo to trace over (image button in the Layers header). It lands locked at the bottom — dim it with the layer opacity.
Lock
The padlock on a layer row blocks drawing on it; toggle it to draw again.
Merge / Flatten
The flatten button in the Layers header bakes every visible layer into one image — blend modes, opacity and recolors included. Hidden layers are discarded (⌘Z brings them back). Right-click a layer to merge just that one down.
Time-lapse: the ▶ button in the topbar replays your drawing building up — scrub, play/pause, and switch speed.
Paper: give the drawing a grid, dot-grid, ruled, or isometric background from Settings ▸ Paper.
Metadata
What it keeps
An imported picture's EXIF, XMP and PNG text fields — including the generation parameters an AI image carries — ride along into exported PNGs. A canvas would otherwise drop all of it.
Panel
The Metadata tab in the sidebar lists every field that will be written. Edit a name or value, remove a field, or add your own; the first edit pins the set to this drawing (Revert goes back to the file's).
Off switch
Settings ▸ Keep source metadata, or the button at the top of the panel.
Works on old files
The original bytes are kept with the image layer, so drawings imported before this existed still have their metadata.
Not carried: C2PA content credentials. Those are signed against the exact pixels they shipped with, so copying one onto an edited picture would only ever produce a credential that fails to validate. EXIF pixel-dimension tags are also left as the original file wrote them — a drop-import can scale a very large picture down.
Stylus
Draw
Touch with stylus tip — pressure sets width, tilt broadens the stroke
Erase
Switch to the eraser with E or the palette (a flipped-over Pencil is not detected as an eraser)
Pan
One finger drag (while stylus active = ignored)
Touch
Pan
One-finger drag
Zoom & rotate
Pinch / spread / twist two fingers
Undo
Two-finger tap (if enabled in settings)
Mouse / trackpad
Draw
Click and drag
Pan
Right-click drag, Space + drag, middle-click drag, or Shift + scroll
Zoom
Scroll wheel / pinch-zoom on trackpad
Tools
B or P
Pen
N
Pencil
M
Marker
H
Highlighter
E
Eraser
I
Eyedropper — sample a color from the canvas
V
Select & transform — marquee (or lasso) across all layers, then move / scale / rotate. Hold Alt to lasso; toggle lasso in the palette
T
Text — click to place a text element
G
Clone stamp — ⌥-click sets the source, then paint over what you want gone
U
Blur — smear a detail away
K
Recolor — pick a color range and shift it (Esc leaves pick/sweep/paint)
L R O
Line · Rectangle · Ellipse (hold Shift to constrain; Arrow is on the toolbar)
Del or ⌫
Delete the current selection
Esc
Leave the current mode — drops a selection back into place, cancels text, disarms a recolor mode
Edit
⌘Z
Undo (works from sliders too; a floating selection lands first)
⌘⇧Z or ⌘Y
Redo
⌘V
Paste an image — the canvas resizes to it
⇧⌘V
Paste at the current canvas size, as a layer — for stacking two versions and comparing them
⌘C
Copy the flattened drawing to the clipboard (recolors baked in)
[ ]
Decrease / increase brush size
hold ⇧
Before / after — the recolor you are editing drops away while held
hold ⌥
Match preview — lights up what the recolor will actually change (recolor panel open or a mode armed)
View
W A S D
Pan up / left / down / right (hold)
Z C
Zoom in / out (hold)
= + −
Zoom in / out (step)
⇧1
Fit to screen (resets rotation)
1
100% zoom
, .
Rotate canvas −/+ 15° (chip in the zoom pill resets)
⌘S
Quick-save backup
Where your drawings live
PumaDraw stores everything in your browser's IndexedDB under the pumadraw.* prefix — on this device, in this browser, and nowhere else. There is no server, no account, and nothing you draw ever leaves your machine.
Important: clearing browser data, switching browsers, using private/incognito mode, or losing this device erases every drawing. IndexedDB is tied to this specific browser on this specific device.
Backing up
Right-click a workspace tab ▸ Export to save one drawing — PNG (visible / all / transparent), SVG, .pumapack, or straight to the clipboard. ⌘S quick-saves the current drawing; it writes a .pumapack envelope with a .json extension, and Import reads it either way. The topbar Export button backs up the whole environment — every drawing plus your preferences — into one .pumapack; Import restores it. Handy for ephemeral environments.
Closing drawings
The × on a workspace tab closes that drawing — including the last one, which is replaced by a fresh blank canvas rather than leaving you with nothing. To clear the whole workspace, use ⚙ ▸ Close all drawings (also on a tab's right-click menu): it asks first, and offers to take a full backup on the way out. Closing removes a drawing from this browser, so export anything you want to keep.
Clear all local data
⚠ Permanent. This erases every PumaDraw drawing, preference and setting stored in this browser. Export a backup first — there is no undo.
Still sure? Type DELETE EVERYTHING to finalize.
About PumaDraw
A pressure-sensitive offline sketching app built first-class for tablets and Apple Pencil.
About PumaWorx
PumaWorx is a suite of offline, single-HTML productivity apps that run entirely in your local browser. The entire suite is a personal, open source vibecoding project.