Overview

What this documentation covers

This document explains how to use the Brushes editor: tools, layers, objects (images & text), file workflow, keyboard shortcuts, history/undo, and advanced behaviors (WASM acceleration, object transforms, image insertion/resizing). It also contains a searchable FAQ and changelog.

Implementation notes: the editor uses an HTML canvas as the final output and manages layers as separate off-screen canvases. Image insertion automatically scales images when inserted (see Objects & Images). Features like history/undo store canvas image data and object lists (see history/undo description below). For low-level details, see the source code snippets in the uploaded file. :contentReference[oaicite:3]{index=3}

Quick start

1. Open the app page that contains the editor (the one with the big canvas).
2. To create a new document: top toolbar → New or N (Ctrl/Cmd+N also supported). The app creates an initial white background layer automatically. :contentReference[oaicite:4]{index=4}
3. Use the left toolbox to select a tool (Brush, Pencil, Eraser, Text, Transform, etc.).
4. Insert an image: toolbar → Insert Image or menu Insert → Image. The editor scales inserted images to fit (scaled to at most 60% of canvas width by default). :contentReference[oaicite:5]{index=5}
5. Save: toolbar → Save or Ctrl/Cmd+S to export the current canvas as PNG. :contentReference[oaicite:6]{index=6}

Tip: When you insert text you enter an inline text editor that commits on blur or Enter (without shift). :contentReference[oaicite:7]{index=7}

Tools & What they do

Tool list (left toolbox)

• Brush — pressure-like brush with size/hardness/opacity/flow sliders. Use mouse or stylus to paint. (Brush uses radial gradients to simulate hardness when hardness < 100%.) :contentReference[oaicite:8]{index=8}
• Pencil — hard-edged stroke (similar control to brush but optimized for pixel-like strokes).
• Eraser — draws with destination-out to erase pixels or uses WASM eraser if WASM engine is present. :contentReference[oaicite:9]{index=9}
• Select — rectangular selection; selection bounds are shown and can be committed.
• Eyedropper — pick a pixel color from the canvas and set it as foreground. :contentReference[oaicite:10]{index=10}
• Transform — move, rotate, resize objects (images & text). Supports handles, rotation, and snapping to grid.
• Crop — crop canvas area.
• Clone — clone stamp (set source point then paint).
• Healing — sample a source and apply blended heal to target area; supports Alt to re-pick source. :contentReference[oaicite:11]{index=11}
• Blur / Sharpen / Dodge / Burn — localized filters applied either via JS or through WASM acceleration if enabled. :contentReference[oaicite:12]{index=12}
• Text — creates text objects editable with an inline textarea; font family, font size, weight, color and alignment controls available. :contentReference[oaicite:13]{index=13}

File operations

New / Open / Save

• New — resets layers, history and creates the initial white background layer.
• Open — loads an image file; the canvas is resized to the image size and the image becomes the single loaded layer. When an image is opened the WASM engine (if enabled) is resized to match the new canvas size. :contentReference[oaicite:14]{index=14}
• Save — exports the composited canvas as PNG (`canvas.toDataURL('image/png')`) and triggers a download. :contentReference[oaicite:15]{index=15}

Layers & History

Layer model

• Each layer is an off-screen canvas (separate canvas element). Layers have properties: id, name, visible, opacity, blendMode, and locked. The UI lists layers and allows toggling visibility and selecting the current layer. :contentReference[oaicite:16]{index=16}
• Layer operations: Add, Duplicate, Move Up/Down, Lock, Delete. The app prevents deleting the last (background) layer. :contentReference[oaicite:17]{index=17}

History / Undo / Redo

History entries store imageData for the affected layer and serialized objects list. Clicking history items restores the canvas imageData and object state. Undo/redo adjust history index and reapply stored imageData. :contentReference[oaicite:18]{index=18}

Objects (images & text)

Overview

The editor supports placing objects on top of the layer stack: images and text objects with position, rotation, scale, flip, visible, and other properties. Objects are drawn on the canvas during redraw and are separate from pixels stored in layer canvases. This allows moving/resizing without re-painting pixels. :contentReference[oaicite:19]{index=19}

Insert Image — scaling behavior

When you insert an image (Insert → Image), the editor:

• Loads the image with FileReader, creates an <img> then measures it.
• Computes a maximum width as min(canvas.width * 0.6, img.width) and scales image proportionally so it fits comfortably in the canvas. The created object is centered on the canvas and becomes the active object. This is the implemented "image resizing" behavior. :contentReference[oaicite:20]{index=20}

Text objects

Text objects are created by selecting the Text tool and clicking. An inline textarea appears for editing; commit on blur or Enter. Font family/size/weight and color controls are available; the editor loads fonts via document.fonts.load when necessary. :contentReference[oaicite:21]{index=21}

Keyboard shortcuts

Changelog

Frequently Asked Questions (FAQ)