Skip to main content
⭐ Pro Feature - Canvas Editor requires a Pro subscription.

​
Overview

Canvas artifacts render interactive graphics that users can edit, export, and customize. 
{
  "width": 1200,
  "height": 630,
  "backgroundColor": "#1a1a2e",
  "shapes": [
    {"type": "circle", "x": 1000, "y": 100, "radius": 200, "fillColor": "#e94560", "opacity": 20},
    {"type": "text", "x": 100, "y": 300, "text": "Hello World", "fontSize": 64, "color": "#ffffff", "bold": true}
  ]
}

​
Structure

{
  "width": 1200,
  "height": 630,
  "backgroundColor": "#1a1a2e",
  "shapes": [...]
}

​
Shapes

​
Basic Shapes

TypeProperties
rectx, y, width, height
circlex, y, radius
ellipsex, y, radiusX, radiusY
diamondx, y, width, height
trianglex1, y1, x2, y2, x3, y3
linex1, y1, x2, y2
arrowx1, y1, x2, y2, arrowType
textx, y, text, fontSize, align
imagex, y, width, height, src

​
Path (Custom Shapes)

Draw any shape using bezier curves: 
{
  "type": "path",
  "segments": [
    {"point": [200, 280], "handleOut": [-60, -60]},
    {"point": [120, 180], "handleIn": [0, 40], "handleOut": [0, -40]},
    {"point": [200, 120], "handleIn": [-40, 0], "handleOut": [40, 0]},
    {"point": [280, 180], "handleIn": [0, -40], "handleOut": [0, 40]},
    {"point": [200, 280], "handleIn": [60, -60]}
  ],
  "closed": true,
  "fillColor": "#e94560"
}

​
Frames & Groups

// Frame - clips content, never rotates
{"type": "frame", "name": "Card", "x": 100, "y": 100, "width": 300, "height": 200, "children": [...]}

// Group - can rotate
{"type": "group", "rotation": 0.5, "children": [...]}

​
Common Properties

PropertyDescription
colorStroke color ("transparent" for none)
fillColorFill color
opacity0-100
lineWidth1, 2, or 4
strokeStylesolid, dashed, dotted
rotationRadians (not on frames)

​
Canvas Sizes

Use CaseSize
YouTube Thumbnail1280 × 720
Instagram Post1080 × 1080
Instagram Story1080 × 1920
Social Banner1200 × 630
Logo500 × 500

​
User Features

​
Vector Editing

Users can double-click any shape to edit vector points:
  • Drag anchor points to reshape
  • Drag bezier handles to adjust curves
  • Click path to add points
  • Delete key removes points

​
Boolean Operations

Combine shapes with:
  • Union (Ctrl+Alt+U) - Merge shapes
  • Subtract (Ctrl+Alt+S) - Cut one from another
  • Intersect (Ctrl+Alt+I) - Keep overlap only
  • Exclude (Ctrl+Alt+E) - Remove overlap

​
Example

{
  "width": 1200,
  "height": 630,
  "backgroundColor": "#1a1a2e",
  "shapes": [
    {"type": "circle", "x": 1100, "y": 100, "radius": 250, "fillColor": "#e94560", "opacity": 15},
    {"type": "circle", "x": 150, "y": 550, "radius": 200, "fillColor": "#0f3460", "opacity": 30},
    {"type": "rect", "x": 80, "y": 240, "width": 60, "height": 6, "fillColor": "#e94560"},
    {"type": "text", "x": 80, "y": 290, "text": "YOUR HEADLINE", "color": "#ffffff", "fontSize": 56, "bold": true},
    {"type": "text", "x": 80, "y": 360, "text": "Supporting text", "color": "#a0a0a0", "fontSize": 22}
  ]
}