Drawing Tools

Available Tools

Pencil

The default freehand drawing tool. Creates smooth, consistent-width strokes perfect for quick sketches and annotations.

Properties

Fineliner

A precision drawing tool that produces thin, consistent strokes. Ideal for detailed illustrations, signatures, and fine annotations.

Best For

• Technical sketches
• Handwritten labels
• Fine detail work
• Signatures

Marker

A bold, wide-stroke tool perfect for highlighting, emphasis, and creating impactful visual elements.

Properties

Ink Brush

A calligraphic brush that varies stroke width based on drawing speed. Creates elegant, expressive strokes with an organic feel.

Characteristics

• Speed Sensitivity - Fast strokes are thinner, slow strokes are thicker
• Tapered Ends - Natural stroke start/end tapering
• Smooth Curves - Optimized for flowing, continuous lines

Best For

• Calligraphy and lettering
• Artistic flourishes
• Expressive illustrations
• Asian-style brush strokes

Eraser

Remove parts of freehand drawings or delete entire elements.

Modes

Laser Pointer

A temporary drawing tool for presentations. Strokes fade away after a few seconds, perfect for pointing out elements during screen sharing or presentations.

Usage

• Activate with Shift+P
• Draw attention to specific areas
• Strokes automatically fade after ~2 seconds
• Great for presentations and demos

Tool options (top bar)

The middle of the top bar shows the options for whichever tool is active, and changes as you switch tools. What you set there applies to the next thing you draw — it is the tool's own setting, not an edit to anything already on the canvas. To restyle something you have already drawn, select it and use the floating quick toolbar or the Properties panel.

Each tool remembers its own settings, so a red brush and a black rectangle stay that way as you switch between them. The Bezier, Elbow, Polyline and Organic Branch tools do not show a line type — those tools are a line type, and the setting would be ignored. A tool with nothing to offer (Selection, Pan, Eraser) leaves the bar empty rather than showing placeholders.

Keyboard Shortcuts

Smart Shapes (hold to correct)

Draw a shape freehand with any pen tool (Pencil, Fineliner, Ink Brush, Marker) and hold the pen still for about half a second before lifting. The freehand stroke instantly snaps to a clean geometric shape.

Your pen tool stays active and nothing is left selected, so you can carry straight on drawing without a trip back to the toolbar or a set of selection handles sitting on top of your work. Switch to Select (V) and click the shape when you want to move, resize, fill or connect it.

• A roughly straight stroke becomes a line.
• A closed round stroke becomes an ellipse / circle.
• A four-cornered stroke becomes a rectangle (or a diamond when drawn on its points).
• A three-cornered stroke becomes a triangle.

It is built to cope with a mouse or trackpad, not just a stylus: wobbly edges, a corner you didn't quite close, and running past your own starting point are all recognised normally. Draw roughly — you don't need a steady hand.

If the stroke is genuinely ambiguous it is left as freehand ink, so holding still never forces a wrong shape. Open strokes are only ever turned into a line: an arc or a half-drawn box stays as ink rather than being closed up for you. Toggle the feature with Shift+Q, from the Command Palette, or in Settings → Pen & Input.

Pressure Sensitivity

With an Apple Pencil or other pressure-capable stylus, the Ink Brush varies its width with how hard you press — light for fast, fine lines and heavy for bold strokes. Input without pressure (mouse, finger) falls back to velocity-based width. Turn pressure on or off in Settings → Pen & Input.

Stroke Stabilization (lazy brush)

For confident, clean inking, turn on stroke stabilization. The brush trails your cursor on a "pulled string" — small jitter inside the string's length is absorbed, and the line is dragged along only once you pull past it. Higher strength means a longer string: smoother and heavier, with a little more lag. The same Procreate/Krita inking feel, and it works with mouse, finger, and Apple Pencil.

Because you'll flip it on and off as you work, it's available several ways: a quick toggle with Shift+S, the stabilization button in the toolbar (shown while a pen tool is active), the brush properties panel (a 0–100% strength slider), the Command Palette, and Settings → Pen & Input. The toggle remembers your last strength. It stacks on top of the always-on light smoothing.

Touch Gestures (iPad & touch)

On a touchscreen, multi-finger gestures give you quick, keyboard-free shortcuts while you draw — inspired by Procreate. One finger draws (with palm rejection when an Apple Pencil is paired); extra fingers act as commands.

• Two-finger drag / pinch — pan and zoom the canvas.
• Two-finger tap — undo. Hold two fingers still to keep undoing.
• Three-finger tap — redo.
• Three-finger swipe down — copy the current selection.
• Four-finger tap — toggle Zen mode (hide the UI chrome).
• Quick pinch-in flick — zoom to fit.

A quick two-finger tap no longer nudges the canvas — panning only begins once your fingers actually move, so taps stay crisp commands.

ColorDrop — drag a colour onto a shape

Open the colour palette and drag a swatch onto any shape to set its fill — a colour chip follows your finger and the shape under it is filled on release. A plain tap on a swatch still sets the stroke colour (Shift+click for fill on desktop). On desktop you can also drag a swatch onto a shape with the mouse.

Text sizing — auto width vs fixed width

A text box has two sizing modes, shown as the Auto Resize toggle in the Properties panel (Text group):

• Auto Resize on — auto width. The box hugs the text and never wraps; it grows and shrinks as you type. Only your own line breaks split lines. This is what you get when you click with the Text tool.
• Auto Resize off — fixed width. The width you set is held, the text wraps inside it, and the height re-flows to fit. This is what you get when you drag out a box with the Text tool.

Scaling text by dragging a corner

Once you've finished typing, drag a corner handle to scale the text itself, not just its box:

• Drag a corner to stretch freely. The font size follows the height, and any extra width (or lost width) becomes Horizontal Scale, so letters can be widened or condensed, as in Illustrator.
• Shift-drag a corner to scale proportionally. Only the font size changes, and the letters keep their shape. Add Alt to scale about the centre.
• Shift-drag a left or right handle to stretch the letters horizontally only: the font size stays, and the Horizontal Scale changes. Shift-drag the top or bottom handle to scale them vertically: the font size follows the height while the width holds, so the letters get taller and narrower-looking rather than wider.
• Left/right handles without Shift still set the wrap width (see the tip above), and top/bottom handles still resize the box.

Horizontal Scale appears in the Properties panel (Text group); type 1 to remove a stretch. Letter spacing and rich-text span sizes scale along with the font size. Stretched text exports to PNG, JPG and SVG as it looks, and Create Outlines produces the stretched shapes. Yappy.updateElement(id, { textScaleX: 1.5 }) sets it from a script.

Known limitations: vertical text ignores Horizontal Scale, and a multi-selection resize still scales font size only (no stretch).

Font weights and width

The Style menu under Font lists every weight a family really has. The built-in Inter, Poppins, JetBrains Mono and Source Code Pro go from Thin (or ExtraLight) to Black, with italics; Merriweather from Light to Black; Caveat Regular to Bold; Hand-drawn and Marker have one weight. A Google font you add by name lists exactly the weights Google has for it, and a variable font file lists every weight on its axis. The B button is still a quick Regular ↔ Bold toggle.

Width. A variable font file with a width axis (for example Roboto Flex, or any file whose name ends in wdth) adds a Width control, from Ultra-condensed to Ultra-expanded. It uses the font's real condensed and expanded shapes, unlike Horizontal Scale, which stretches the letters. It only appears for fonts that have the axis.

Y.updateElement(id, { fontFamily: 'sans-serif', fontWeight: 300 });   // Inter Light
Y.updateElement(id, { fontStretch: 'condensed' });                     // needs a width axis

Weights and width export to SVG as font-weight / font-stretch. Create Outlines converts the built-in fonts in Regular and Bold; for other weights, add the static font file with ＋ Add font….

Text on Path (Curved Text)

Text can follow any path: a curve you drew with the Pen tool, a line or connector, a freehand stroke, or the outline of a closed shape. It is the tool for a logo's circular type, an arched headline, or a label that bends along a road.

Type on Path tool. Press Alt+T, or open the Text tool's flyout in the toolbar and choose Type on Path. Hover a path (it highlights), click it, type, and press Enter. Esc closes the field, and a second Esc leaves the tool. The first time, the text is centred: at the top of a circle or other closed shape, and mid-way along an open path.

Works on:

• Pen paths (P): any curve or shape you draw, open or closed. On a compound path, the text follows its first subpath.
• Connectors: lines, arrows, bezier curves, elbows and polylines.
• Pen strokes (Fineliner, Ink Brush, Marker).
• Closed shapes: rectangle, circle, diamond, triangle and polygons; the text wraps around the outline.

You can also double-click a shape or connector to type a label and switch on Text on Path in the quick toolbar or Properties panel.

Layout (Properties panel → Text, once Text on Path is on):

Logo badge recipe. Draw a circle (O) and give it the top text: Alt+T, click, type. For the bottom line, draw a second circle the same size, give it its text, then set Flip to Other Side on and Start Position to 0.5. To hide a ring and keep only its text, set its stroke to none. The text stays visible and uses its own text colour (black by default).

const Y = window.Yappy;
const ring = Y.createCircle(0, 0, 300, 300);
Y.attachTextToPath(ring, 'YAPPY DRAW STUDIO');                          // centred on top
const low = Y.createCircle(0, 0, 300, 300, { strokeColor: 'transparent' });
Y.attachTextToPath(low, 'EST 2026', { flip: true, align: 'center', offset: 0.5 });
const arch = Y.createPath([
  { x: 400, y: 200, kind: 'smooth', outX: 80, outY: -150 },
  { x: 700, y: 200, kind: 'smooth', inX: -80, inY: -150 },
]);
Y.attachTextToPath(arch, 'along a pen path');                            // mid-way, centred

attachTextToPath(id, text, { align, offset, flip, side, spacing }) returns false when the element has no path to follow. The same settings are element properties: curvedText, textPathOffset, textPathAlign, textPathFlip, textPathSide and textPathSpacing.

Curved text renders in both the sketch and architectural styles and is exported to PNG and SVG as it appears.

Text follows the outline each shape actually draws, including rounded rectangle corners and a capsule's round ends.

Known limitations: A compound path carries text on its first subpath only, since text jumping between separate contours would be unreadable. The text is laid out along the path; it does not warp the letter shapes. For bent letterforms use a warp preset (Arc, Arch, Flag, Wave…).

Scripting (API)

The freehand tools (Pencil, Fineliner, Marker, Ink Brush) are primarily interactive — you draw with a pointer or stylus. For programmatic strokes, the global window.Yappy (usable as Yappy) exposes a few ways to commit ink from a list of world points.

// Blob brush: filled stroke from world points (radius = half-thickness).
// Same-colour overlaps merge into one shape.
Yappy.blobStroke([
  { x: 100, y: 100 }, { x: 160, y: 130 }, { x: 220, y: 100 },
], 14);

// A vector "pen" stroke as an open path (crisp, fully editable)
Yappy.createPath([
  { x: 100, y: 220, kind: 'smooth', outX: 40, outY: -40 },
  { x: 240, y: 220, kind: 'smooth', inX: -40, inY: -40 },
], { closed: false, strokeColor: '#1e1e1e', strokeWidth: 3 });