A pressure-sensitive sketching app in one offline HTML file, built first for tablets and Apple Pencil — and unusually willing to work alongside AI image tools rather than pretending they do not exist.
Strokes stay vector — every stroke remains an editable object. Recolor it, resize it or take it out long after it was drawn, and the ones around it do not move
Built for the AI round trip — canvas extension for an outpainting pass, crop-to-selection the other way, and a PNG export a model can take straight back in
Real stylus behaviour — pressure sets width, tilt broadens, palm rejection lets you rest your hand, and every brush can have its own pressure curve
Nothing is flattened behind your back — Flatten is the one place anything becomes permanent, and you have to ask for it
See Tools for the reference, Workspace for the panels, and Keyboard for every shortcut.
Working in it
Nothing is destructive until you ask for it: strokes stay strokes, and Flatten is the one place anything becomes permanent.
Rough it in on its own layer — Pencil is the most tilt-responsive brush. Keep the sketch separate so you can dim or delete it later.
Ink with the brush that matches the mark — Pen tapers, Marker stays solid, Highlighter will not double-darken where passes cross.
Prepare the canvas before a generation pass — Extend for an outpaint, Crop to selection the other way, and export the selection as a mask when a model needs to know where it may repaint.
Flatten last, and only on purpose — it is the one step you cannot take back with ⌘Z once the drawing is saved.
Brushes
Pen (B)
Pressure-sensitive ink line, tapered at both ends.
Pencil (N)
Lighter (85% opacity) and the most tilt-responsive — lean it over for a broad stroke.
Marker (M)
Wide and near-uniform; barely tapers.
Highlighter (H)
Wide, semi-transparent, multiply. No taper, and it will not double-darken where passes cross.
Eraser (E)
Erases the active layer only.
Custom brushes
＋ in the palette, or right-click any brush ▸ Duplicate for an editable copy of a built-in. The Brushes panel renames, reorders and deletes them — and that order is the palette’s order.
Pressure curve
Right-click any brush ▸ Pressure curve…. Pull the line down to need a firmer press before the stroke opens up. Applied to the raw reading, so everything downstream behaves normally.
Apple Pencil: pressure sets width, tilt broadens, and palm rejection means you can rest your hand. [ and ] change size.
Shapes and text
QuickShape
Draw a rough line, box or oval, keep the pen down and stop moving, and it snaps to the ideal one. Lines, rectangles and ellipses only — a recogniser that guesses polygons wrong is worse than one that declines. ⚙ ▸ QuickShape turns it off.
Text (T)
Click to place and type; Escape commits. Double-click existing text to re-edit it.
Plate and halo
What makes a label readable over a screenshot. A plate is one filled panel behind the whole block; a halo outlines each letter instead, staying readable without hiding what is behind it.
Selection
Rectangle / Lasso select (V)
Two buttons, side by side. Marquee strokes and pictures across every visible unlocked layer, then move, scale from a corner, stretch from an edge, or rotate from the top handle. Escape drops it back.
Select all / invert
⌘A takes everything; ⇧⌘I swaps to what you did not have. ⇧⌘D copies the selection to a layer of its own.
Nudge
Arrow keys move a pixel, Shift ten. A held key is one undo step, not two hundred.
Canvas
Crop (X)
Drag a box, Enter applies, Escape cancels. Aspect locks it to a ratio — or to an SDXL bucket, which is an exact pixel size, so the crop is followed by a scale and you land on 832×1216 rather than merely something that shape.
Extend (outpaint)
⚙ ▸ Extend canvas grows the artboard on the sides you choose, leaving empty margin for a model to fill. The picture does not move or stretch.
Scale drawing
⚙ ▸ Scale drawing… changes the coordinate scale. Strokes stay vector and pictures keep their bitmaps, so it is a change of numbers, not a re-render. For a file at an exact size, use Export at size.
Rotate / flip
⚙ ▸ Rotate and Flip drawing are baked and an export reflects them — unlike the view-only rotation on , and .. Text stays upright either way.
Layers
The usual
Blend mode, opacity, duplicate, lock, reorder. Up to 24; a warning appears past twelve, because each keeps its own on-screen cache.
Clip to layer below
Right-click a layer ▸ Clip and it only shows where the layer beneath has pixels. Nothing is thrown away — turn it off and the whole layer is back.
Lock transparency
The same problem from the other end: clipping says where a layer shows, lock transparency restricts where you can paint.
Merge / Flatten
Bakes visible layers into one image and discards hidden ones. The one place anything becomes permanent — ⌘Z is the only way back.
Workspace
Three places hold the chrome, and each is somewhere things stay put.
Options bar
The strip above the canvas: the armed tool’s settings, plus Size, Opacity and Undo/Redo. Fixed height, with Size and Opacity to the left of the part that varies, so choosing a tool never moves anything. Compacts to icons when narrow.
Panel column
Tools, Color, Brushes and Reference, all on screen at once down the right. It takes width out of the canvas rather than covering the drawing, and the panels button in the topbar hides it when you want the room. Below about 820px wide it starts hidden and that button brings it back.
Layers pane
Pinned below the column so the layer list is visible while you use the tools, rather than four panels further down.
Color
One panel holds the current color and its hex, the eyedropper, a fixed Markup row nothing can overwrite, and Saved — your own slots, filled by holding one. The ⋯ menu imports, exports and generates harmonies, all into Saved.
References
Reference
The Reference panel pins pictures beside the canvas. In the drawing’s file, so they survive a reload and travel in a .pumapack — but not in the layer stack, so no export or flatten ever sees them.
Press ? for a one-screen cheat sheet of every shortcut. It is generated from the same table the keys are bound from, so it cannot drift out of date.
Stylus, touch and mouse
Draw
Touch with stylus tip — pressure sets width, tilt broadens the stroke
Rulers and guides (')
Settings ▸ Rulers, or the ' key, puts a ruler down the top and left edges marked in document pixels. Drag out of a ruler to leave a guide: down from the top for a vertical one, right from the left for a horizontal one. Drag a guide's marker on the ruler to move it again, and drop it back on the ruler to remove it. Guides belong to the drawing, so they are saved with it, and Settings ▸ Clear guides removes the lot. They hide while the view is turned — a ruler that runs along the screen cannot label a page sitting at an angle, and a wrong ruler is worse than none.
Draw symmetrically
Settings ▸ Symmetry — vertical, horizontal, both axes, or radial (×4 to ×12) about the canvas centre. You see the mirrors as you draw, and when you lift they become ordinary strokes: selectable, deletable and exportable one by one. One stroke is one undo however many mirrors it made
Frame something
Settings ▸ Selection ▸ Zoom to selection fills the view with whatever you have selected, transform included. Settings ▸ Fit to width fills the width and lets the height fall where it does — for a tall drawing you are reading down rather than looking at whole
See the pixels
Past about 900% a faint one-pixel grid appears, so you can tell which pixel you are on. Settings ▸ Pixel grid at high zoom turns it off
Check the stylus
⚙ ▸ Stylus readout shows what the pen is actually reporting while you draw — pointer type, pressure, tilt, and whether the reading came from the browser's coalesced samples or had to be taken from the event itself. For diagnosing a pen that is not responding to pressure.
Steady a shaky line
Settings ▸ Stabilizer — Off to 100%. It steadies every brush, not just the custom ones, and composes with a custom brush's own smoothing rather than overriding it
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
Shortcuts
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
Del or ⌫
Delete the current selection
Esc
Leave the current mode — drops a selection back into place, cancels text, cancels a crop
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
[ ]
Decrease / increase brush size
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
Everything is in your browser's IndexedDB under the pumadraw.* prefix — this device, this browser, nowhere else. No server, no account.
Important: clearing browser data, switching browsers, private mode, or losing this device erases every drawing.
Backing up
One drawing
Right-click a workspace tab ▸ Export — PNG, SVG, .pumapack or the clipboard. ⌘S quick-saves a .pumapack (with a .json extension; Import reads it either way).
Everything
The topbar Export button writes every drawing plus your preferences into one file. Import restores it.
Closing
A tab’s × closes that drawing — including the last, which is replaced by a blank one. ⚙ ▸ Close all drawings offers a backup on the way out.
Export image
Formats
PNG, JPEG or WebP, at 1–4× or an exact pixel size — which is what an img2img round trip wants. With something selected you can export just that.
Import size
Pictures keep their exact pixels up to 16.7 megapixels — a retina screenshot arrives untouched. Above that it downsamples and says so.
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.