Drawing Tools

The Drawing Tools (CraftDrawer) is a unified sidebar panel providing Text, Brush, Eraser (with a Restore sub-mode), Mosaic, and Marker tools.

Overview of Craft Tools

Clicking the active tool's button (or pressing its shortcut again) also toggles it off.

Brush Tool

The Brush tool lets you paint directly onto a paint layer with customizable properties.

Activating the Brush

• Press B on your keyboard, or
• Open the Drawing Tools drawer (right sidebar) and select Brush

Brush Properties

Hold Cmd/Ctrl while starting a brush stroke to paint on a new paint layer.

Drawing Tips

• The brush uses Catmull-Rom spline smoothing for naturally smooth strokes
• Each stroke is stamp-based for consistent quality
• Paint on a dedicated Paint layer to keep your work non-destructive

Eraser & Restore Tools

The Eraser in OpenGPEX is non-destructive — it works by painting a bitmap mask rather than permanently deleting pixels. The Restore tool is its counterpart for bringing content back.

Activating the Eraser

• Press E on your keyboard, or
• Open the Drawing Tools drawer and select Eraser

Switching to Restore

• Press Tab while the Eraser is active to switch to the Restore tool
• Press Tab again to switch back to Eraser
• Hold Cmd/Ctrl and click to create a new mask on the layer

How It Works

• The Eraser punches transparency into the layer's bitmap mask (destination-out) → content becomes hidden
• The Restore tool paints white (opaque) back into the mask → previously erased content reappears
• Lower Opacity produces partial mask values = semi-transparent (partial visibility)

Since original pixels are never deleted, you can always restore hidden areas using the Restore tool.

Eraser & Restore Properties

Same as Brush: Size, Opacity, and Hardness are all adjustable and shared between both tools.

Text Tool

Creating Text

1. Press T to activate the Text tool
2. Click anywhere on the canvas — a text layer is created automatically
3. Start typing

Editing Existing Text

• With the Text tool active, click on a text layer to enter edit mode
• Enter commits the edit (Shift + Enter inserts a newline)
• Escape cancels editing — for a newly created layer this removes it; for an existing layer it reverts the changes
• Hold Cmd/Ctrl to move the text layer while in edit mode

Text Properties

Text Box Modes

• Auto-Size: The text box grows to fit your content (default)
• Fixed-Size: Dragging a resize handle switches the layer to a fixed box; text wraps within

Transforming Text

• Move: Drag the text box
• Resize: Drag corner/edge handles (8-direction) — the box switches to Fixed-Size mode; the font size itself stays unchanged and text re-wraps

Tips

• Text layers remain fully editable until you flatten or merge them
• Use Stroke for readability over complex backgrounds
• Full IME input support for CJK (Chinese/Japanese/Korean) characters

Font Management

OpenGPEX provides a comprehensive font system with three tiers of font sources:

Font Sources

Built-in Font Categories

How Font Loading Works

1. System fonts (Arial, Inter, Georgia, etc.) are always available — no download needed
2. Google Fonts are downloaded on-demand when you first select them
3. Downloaded fonts are cached in IndexedDB for offline use on future visits
4. CJK fonts use smart unicode-range subsetting — only the glyphs you actually use are downloaded

Searching for Additional Fonts

If the built-in library doesn't have what you need:

1. Open the font picker in the Text tool panel
2. Use the search field to query the entire Google Fonts catalog
3. Select a font from the search results — it's downloaded and added to your personal library
4. User-discovered fonts persist across sessions via localStorage

Local Font Access (Chrome/Edge)

On supported browsers, you can access fonts installed on your operating system:

1. Click the Scan Local Fonts option in the font picker
2. Grant permission when the browser prompts
3. All system-installed fonts become available in the font list
4. Works like a desktop application — use any font from your OS

Note: Local Font Access requires Chrome 103+ or Edge 103+. Firefox and Safari do not support this API.

Offline Support

All previously used fonts work offline thanks to the three-tier cache:

• Memory → Instant access (current session)
• IndexedDB → Persisted WOFF2 binaries (survives page refresh)
• CDN → Network fallback (for first-time downloads)

Color Picker

The Color Options bar provides color selection for brush painting:

• EyeDropper: Sample any color from the screen (browser EyeDropper API)
• Color Picker: Color selection with preset palette
• Pin Toggle: Keep the color picker open during continuous painting
• Paint Bucket: Fill with the chosen color

Next Steps

• Layer Management — Organize your artwork in layers
• Masks & Non-Destructive Editing — Advanced masking techniques
• Color Adjustments — Modify colors and tones

Last updated: 2026-07-30