Canvas Tools

Design on Web includes several canvas interaction features that improve the editing workflow: style transfer, grid snapping, ruler guides, drag-and-drop insertion, and a context menu.

Copy / Paste Style

Copy visual properties from one object and apply them to others. The ObjectStyle includes fill, stroke, opacity, font properties, blend mode, and more. Pasting is undoable as a single action.

// Copy style from an object
const style = engine.copyStyle(sourceObjectId);
// style: ObjectStyle { fill, stroke, strokeWidth, opacity,
//   fontFamily, fontSize, fontWeight, fontStyle, blendMode, ... }

// Paste style to one or more target objects
engine.pasteStyle([targetId1, targetId2], style);
// Undoable as a single action — Ctrl+Z reverts all targets

Style Picker Example

A typical use case is building a style-picker tool: copy from the selected object, then paste to the next object the user clicks.

// Real-world example: style-picker tool
const selectedIds = engine.getSelectedObjectIds();
if (selectedIds.length === 0) return;

// Step 1 — copy from first selected object
const style = engine.copyStyle(selectedIds[0]);

// Step 2 — user clicks another object
canvas.once('mouse:down', (e) => {
  const target = e.target;
  if (!target) return;
  const id = (target as any).id;

  // Step 3 — paste the style
  engine.pasteStyle([id], style);
});

Style Transfer Methods

Name	Type	Default	Description
`copyStyle(id)`	`ObjectStyle`	—	Returns the visual style of the specified object
`pasteStyle(ids, style)`	`void`	—	Applies the style to all target objects (undoable as one action)

Grid Snap

Enable grid snapping to constrain object movement and scaling to a fixed pixel grid. This works alongside smart guides — they are complementary, not exclusive.

// Enable grid snapping
engine.enableGridSnap(true);

// Set grid size to 50px (default is 10px)
engine.setGridSnapSize(50);

// Objects now snap to multiples of 50 on move and scale

// Disable grid snapping
engine.enableGridSnap(false);

Grid Snap Methods

Name	Type	Default	Description
`enableGridSnap(enabled)`	`void`	—	Toggle grid snapping on or off
`setGridSnapSize(px)`	`void`	`10`	Set the grid increment in pixels

💡

Grid + Smart Guides

Grid snap and smart guides (alignment lines) can both be active at the same time. Grid snap constrains to fixed increments, while smart guides snap to nearby object edges and centers.

Ruler Guides

Add horizontal and vertical ruler guides to the canvas. Guides render as dashed cyan lines and provide a 5px snap threshold for nearby objects. They are non-selectable and excluded from exports.

// Add a horizontal guide at y=200
const hGuideId = engine.addGuide('horizontal', 200);

// Add a vertical guide at x=540 (center of 1080px canvas)
const vGuideId = engine.addGuide('vertical', 540);

// List all guides
const guides = engine.getGuides();
// Returns: Array<{ id: string, orientation: 'horizontal' | 'vertical', position: number }>

// Remove a specific guide
engine.removeGuide(hGuideId);

// Clear all guides at once
engine.clearGuides();

Guide Methods

Name	Type	Default	Description
`addGuide(orientation, position)`	`string`	—	Add a guide and return its ID. Orientation is 'horizontal' or 'vertical'.
`removeGuide(id)`	`void`	—	Remove a specific guide by ID
`clearGuides()`	`void`	—	Remove all guides from the canvas
`getGuides()`	`Guide[]`	—	Return all current guides with their orientation and position

ℹ️

Non-exportable

Ruler guides are canvas overlays only. They are not included in any export format (PNG, PDF, SVG, etc.) and are not saved in the design JSON by default.

Drag-and-Drop

Shapes, text presets, and icons in the sidebar panels support drag-and-drop onto the canvas. The drop position is calculated relative to the current zoom and pan, so the object lands exactly where the user drops it.

Shapes panel — drag any shape preset onto the canvas to place it at the drop position
Text panel — drag heading, subheading, or body text presets
Icons panel — drag any of the 64 built-in icons
Click-to-add still works — clicking a sidebar item adds it at the canvas center

💡

Position-aware

The drop handler accounts for canvas zoom and viewport pan. An object dropped at the mouse cursor position will appear at that exact location on the design surface, regardless of zoom level.

Context Menu (Right-Click)

Right-clicking on the canvas opens a context menu with commonly used actions. The menu contents change based on whether an object is selected.

Object Context Menu

Right-click on a selected object to see copy, paste, duplicate, delete, z-order, lock, and group/ungroup actions.

// Right-click on an object shows:
//
// ┌────────────────────────────────┐
// │  Copy                  Ctrl+C  │
// │  Paste                 Ctrl+V  │
// │  Duplicate             Ctrl+D  │
// │  Delete                   Del  │
// │ ─────────────────────────────  │
// │  Bring Forward                 │
// │  Send Backward                 │
// │  Bring to Front                │
// │  Send to Back                  │
// │ ─────────────────────────────  │
// │  Lock                          │
// │  Group              Ctrl+G  *  │
// │  Ungroup      Ctrl+Shift+G  *  │
// └────────────────────────────────┘
//  * Group shown when multi-selected
//  * Ungroup shown when a group is selected

Canvas Context Menu

Right-click on the empty canvas for paste, select all, and zoom controls.

// Right-click on empty canvas shows:
//
// ┌────────────────────────────────┐
// │  Paste                 Ctrl+V  │
// │  Select All            Ctrl+A  │
// │ ─────────────────────────────  │
// │  Zoom In               Ctrl++  │
// │  Zoom Out              Ctrl+-  │
// │  Zoom to Fit                   │
// └────────────────────────────────┘

Context Menu Behavior

Name	Type	Default	Description
`Keyboard shortcuts`	`visual hint`	—	Shortcut hints shown to the right of each action
`Close on click outside`	`behavior`	—	Menu closes when clicking anywhere outside it
`Close on Escape`	`behavior`	—	Menu closes when pressing the Escape key
`Group / Ungroup`	`conditional`	—	Group appears for multi-selection, Ungroup for group objects
`Lock / Unlock`	`toggle`	—	Toggles the selectable and movable state of the object

Background Mockup & Dieline Overlay

For printing industry workflows, Design on Web supports two special canvas layers: a background mockup (rendered behind the design) and a dieline overlay (rendered on top). Both are non-exportable and non-selectable — they serve as visual guides only.

Background Mockup

A background mockup shows the physical product (e.g., a t-shirt, mug, or packaging box) behind the design canvas, so the user can preview how their design will look on the real product.

// Set a t-shirt mockup image behind the canvas
await engine.setBackgroundMockup('/assets/tshirt-mockup.png', {
  opacity: 0.9,
});

// Update the mockup opacity later
engine.updateBackgroundMockup({ opacity: 0.5 });

// Remove when no longer needed
engine.removeBackgroundMockup();

Dieline Overlay

A dieline overlay shows cut lines, fold lines, bleed zones, and safe zones on top of the design. This is essential for packaging and label products where the printed output will be die-cut.

// Set a dieline overlay (cut/fold lines) on top of the canvas
await engine.setDielineOverlay('/assets/box-dieline.svg', {
  opacity: 0.6,
});

// Toggle visibility without removing the overlay
engine.toggleDielineVisibility(false); // hide
engine.toggleDielineVisibility(true);  // show

// Update overlay options
engine.updateDielineOverlay({ opacity: 0.3 });

// Remove the overlay entirely
engine.removeDielineOverlay();

Mockup & Dieline Methods

Name	Type	Default	Description
`setBackgroundMockup(src, options?)`	`Promise<void>`	—	Loads an image and places it behind the canvas as a non-exportable, non-selectable mockup.
`removeBackgroundMockup()`	`void`	—	Removes the background mockup image from the canvas.
`updateBackgroundMockup(options)`	`void`	—	Updates mockup options (e.g., opacity) without reloading the image.
`setDielineOverlay(src, options?)`	`Promise<void>`	—	Loads an SVG or image and places it on top of the canvas as a non-exportable, non-selectable overlay.
`removeDielineOverlay()`	`void`	—	Removes the dieline overlay from the canvas.
`updateDielineOverlay(options)`	`void`	—	Updates dieline overlay options (e.g., opacity) without reloading.
`toggleDielineVisibility(visible?)`	`void`	—	Toggles dieline overlay visibility. Pass true/false to set explicitly, or omit to toggle.

ℹ️

Non-exportable layers

Both mockup and dieline layers are excluded from all export formats (PNG, PDF, SVG, etc.). They exist solely as visual aids during editing. See the Printing Features page for the full product configuration system.