Canvas & Sketch
Purple8 AI Architect has two drawing surfaces for different stages of design:
| Surface | Route | Best for |
|---|---|---|
| Canvas | /canvas | Precision floor plans, area schedules, compliance-grade GEA/GIA/NLA |
| Sketch | /sketch | Freehand concept ideation, Apple Pencil, quick renders |
They are connected: Canvas exports to Sketch as a tracing underlay, and Sketch sends work back to the active project stage in Projects.
Canvas — Precision Vector Drawing
Canvas is a vector area calculator built to RICS standards. Everything you draw produces a live, measurement-accurate area schedule that updates as you work.
Drawing Tools
Open Canvas at /canvas. The toolbar runs vertically on the left side.
| Tool | Shortcut | How to use |
|---|---|---|
| Draw | D | Click to place vertices one by one. Snap back to the first point (green highlight) to close the polygon. Double-click to close immediately. |
| Arc | A | 3-point arc for curved walls: click the start point, then a mid-point on the curve, then the end point. |
| Select | S | Click a shape to select it. Drag to reposition. Click a vertex handle to move individual points. Hold and drag across empty space to box-select. |
| Annotate | N | Click two points to place a dimensioned annotation (shows real-world distance in the active unit). |
| Symbol | B | Place architectural symbols on walls. Choose door, window, stair, or lift from the symbol picker. Click a wall edge to snap the symbol to it. |
While drawing:
Shift— constrain to 45° incrementsO— toggle ortho lock (horizontal/vertical only)G— toggle grid snap; grid size set in the right panelCtrl/⌘Z— undo last vertex or last shapeEsc— cancel current polygon in progress
Area Layers
Canvas uses the three RICS standard measurement layers. Select the active layer in the right panel before drawing.
| Layer | Full name | What to draw |
|---|---|---|
| GEA | Gross External Area | The building's outer perimeter, to the outside face of external walls |
| GIA | Gross Internal Area | The internal perimeter, to the inside face of external walls |
| NLA | Net Lettable Area | Tenantable space only — excludes cores, stairs, plant rooms, shafts |
Each layer is colour-coded (GEA blue, GIA purple, NLA teal). You can draw on multiple layers in the same session. The area schedule in the right panel shows totals per layer.
Holes (voids): Draw a polygon inside an existing closed shape and Canvas automatically detects it as a void and subtracts its area. Useful for lift shafts, columns, and internal voids.
Area Measurement Methodology
Set in the right panel under Methodology:
| Method | How area is calculated |
|---|---|
| Face (default) | Polygon area exactly as drawn — to the face of whatever line you drew |
| Centreline | Adjusts outward by half the wall thickness — use when drawing to wall centrelines |
| Internal | Adjusts outward by the full wall thickness — use when drawing to internal wall faces but reporting to external |
Enter Wall Thickness (default 300 mm) in the same panel. Changing it recalculates all areas live.
Room Naming
Press R with a closed shape selected — Canvas classifies the room by area and aspect ratio and suggests a label (Bedroom, Kitchen, WC, Corridor, Open Plan Office, etc.). Accept or type your own name. Named rooms appear in the CSV export.
Symbols
In Symbol mode (B), choose from:
| Symbol | Default width | Notes |
|---|---|---|
| Door | 900 mm | Quarter-arc swing drawn automatically |
| Window | 1200 mm | Glazing bar pattern |
| Stair | 1200 mm | Tread lines, direction arrow |
| Lift | 1100 mm | Cab outline + door gap |
Click a wall edge to snap the symbol; adjust width with the slider; rotate with the rotation dial. Delete a placed symbol by selecting it and pressing Delete.
Background Image & Calibration
Trace over an existing drawing:
- Click 📎 Import (top toolbar) and select a PNG or JPG (scanned plan, site photo, consultant's PDF screenshot)
- The image appears as a locked underlay — you can adjust its opacity with the slider but cannot accidentally edit it
- Click Calibrate in the right panel
- Click two points on the image that correspond to a known real-world distance (e.g. the ends of a dimensioned wall)
- Type the real-world distance and confirm
- Canvas sets the scale (pixels per millimetre) — all areas and annotations are now measurement-accurate
If you do not calibrate, Canvas uses a default screen resolution scale. Always calibrate before using the area schedule for quantity surveying.
Solar Overlay
Shows sun path and wall solar exposure for the project location and time of year.
- Click ☀️ Solar in the toolbar to toggle it on
- Select season from the dropdown: Summer · Equinox · Winter
- Walls are shaded by solar exposure — south-facing (northern hemisphere) receive the most sun and are highlighted warmest
- The sun path arc shows approximate azimuth and altitude for morning, noon, and evening
Location source (in priority order):
- 📍 GPS button — tap once to use your device's current GPS coordinates. Session-only — never saved to the project. Useful on site.
- Project location — if the active project has a site location set in Projects, that coordinates are used automatically.
- Default — London (51.5°N) if no location is available.
Live Compass
Replaces the manually dragged compass rose with your device's real-world orientation.
- Click 🧭 Compass in the toolbar
- On iOS 13+: a permission dialog appears — tap Allow. On Android: no prompt needed for absolute orientation events.
- The compass rose and sun path arc rotate in real time to match where your device is physically pointing
- While live compass is active, dragging the compass rose is disabled
- Click 🧭 Compass again to stop — the compass rose stays at the last live heading and becomes draggable again
This is most useful on site: open Canvas on your iPad, point it north, and the sun path and wall highlights will match the actual building orientation in front of you.
AEC Overlays
Press V (or the Overlay button in the toolbar) to cycle through analysis overlays:
| Overlay | What it shows |
|---|---|
| Off | Clean drawing, no overlay |
| Space Syntax | VGA heatmap — warm colours = high spatial integration (busy, naturally navigated routes); cool = segregated (private, quiet) |
| Structural | Span warnings — flags any room dimension that exceeds the maximum unsupported span for the selected structural system. Adjust the span threshold in the panel that appears. |
| Zen | Wellbeing scorecard — scores the layout on natural light access, circulation quality, and room proportions |
All three overlays run the corresponding Phase 8 algorithm in a background web worker — results appear within 1–2 seconds for typical floor plans. No page navigation needed.
Contextual Analysis Panel
When any overlay is active, a collapsible Analysis panel appears on the right edge of the canvas. It surfaces the key numbers from that overlay without leaving the drawing:
| Overlay | Panel shows |
|---|---|
| Space Syntax | Average VGA integration score · 3 best-connected rooms · 3 most isolated rooms |
| Structural | Span warning count · 4 worst offending spans (room name, actual span, limit) |
| Zen | Structural score (0–100) · Daylight score (0–100) · Flow quality label |
At the bottom of the panel, a Full Analysis → button opens the full Algorithms page with the matching Phase 8 tab already selected and a ?from=canvas parameter so the back button returns to your drawing.
- The panel collapses to a small tab on the edge — click the chevron to expand or hide it
- It disappears automatically when you press V back to Off
3D Massing View
Click the 3D button in the top toolbar (or press 3) to open a live Three.js massing model of your floor plan. Every closed polygon is extruded to ceiling height. Walls, doors, and windows are rendered at their correct geometry — doors with frame reveals, windows with glazing panels.
The 3D view is a full workflow tool, not just a preview.
Ceiling height and storeys
| Control | Where |
|---|---|
| Ceiling height slider | Top toolbar — drag to adjust (2.0 m → 6.0 m). Impact chips below the slider update live: total building height, daylight depth, internal volume, wall area. |
| Storeys | Set in the Canvas right panel (FSI / Planning section). Multiple storeys are stacked with 250 mm concrete slabs rendered between floors. |
Camera presets
Three preset view buttons sit next to the Reset camera button in the 3D toolbar:
| Button | View |
|---|---|
| Plan | Top-down plan view. Camera positioned directly above the building centroid. |
| S Elev | South elevation. Camera looking north from in front of the south facade. |
| E Elev | East elevation. Camera looking west from beside the east facade. |
All presets auto-scale camera distance to building height, so they work on single-storey houses and towers alike. Orbit freely after selecting a preset.
Reset camera (↺) restores the default 45° perspective view.
Section cuts
Click the ✂ Scissors button to enable a horizontal section cut.
- A translucent violet plane appears at mid-height marking the cut level
- Geometry above the plane is clipped — the interior of all rooms, walls, and slabs is exposed
- A height slider appears in the toolbar: drag to move the cut from ground level up to the roof
- The live readout shows the cut height in metres
- Click ✂ again to remove the cut and restore the full model
Section cuts are view-only — they do not affect any model data or Canvas drawings.
AI Audit
Click ⚡ AI Audit in the toolbar to run three parallel analyses against the 3D massing:
| Panel | What it returns |
|---|---|
| Compliance | Room-by-room regulatory checks against your project jurisdiction (NBC India, UK Building Regs, IBC 2021) |
| Efficiency | GIA efficiency ratio, dead circulation analysis, room aspect ratio issues |
| Cost Estimate | Indicative ₹/m² or £/sqft benchmark for the total GFA |
Results appear in a scrollable strip below the toolbar. All three calls run in parallel — typically 8–15 seconds. The estimate is directional only and not suitable for tender or regulatory submission.
Export
| Button | Output |
|---|---|
| ↓ Export .glTF | Binary .glb file — import directly into Revit, Rhino, Blender, or any IFC-capable tool |
| ✦ Render 3D | Captures the current 3D perspective frame and opens the AI Render panel (same as Sketch's Render feature). Gives better results than rendering from the 2D floor plan. |
Setback Rules
If the active project has setback distances defined (set in Projects → Site Rules), Canvas draws red setback lines on the canvas and highlights any shapes that breach them. Setbacks are per cardinal direction (north, south, east, west) in metres.
Export
| Format | How | Contents |
|---|---|---|
| SVG | Click ↓ SVG | Full vector drawing — all layers, annotations, compass, sun path if visible |
| DXF | Click ↓ DXF | AutoCAD-compatible — one layer per GEA/GIA/NLA; shapes, annotations |
| Click ↓ PDF | A3 landscape, print-ready | |
| CSV | Click ↓ CSV | Area schedule — room name, layer, gross area, perimeter, wall thickness methodology |
Sketch — Freehand Drawing Board
Sketch is the concept-stage surface. Draw rough massing, section cuts, elevations, or spatial diagrams with a natural pencil feel. Render them photorealistic with AI. Then bring them into Canvas for precise measurement, or attach them to your project in Projects.
Tools
| Tool | What it does |
|---|---|
| Pen | Freehand drawing. Choose brush style: Fine (liner — thin, precise), Bold (marker — thick, expressive), Pencil (soft, textured) |
| Eraser | Stroke eraser — removes stroke segments near the cursor |
| Fill | Flood-fill a closed area with the current colour |
| Rect | Axis-aligned rectangle — click and drag |
| Ellipse | Ellipse / circle — click and drag; hold Shift for perfect circle |
Colour, stroke width, and opacity are set in the right panel.
Apple Pencil on iPad
| Input | Effect |
|---|---|
| Stylus pressure | Liner and marker brushes vary stroke width with pressure (light touch = thin; firm = thick) |
| Stylus tilt | Pencil brush responds to tilt angle, shading like a real pencil held at an angle |
| Coalesced events | Sub-frame point sampling — curves are smooth even at high drawing speed |
| Double-tap (Pencil Pro) | Toggles between Pen and Eraser |
| Live HUD | A small overlay shows pressure and tilt values while drawing — useful when calibrating your touch |
On non-Pencil devices (mouse, finger): pressure and tilt are not available; the brush renders at constant width.
Layers
Sketch supports up to 8 independent layers. The layer panel opens from the Layers button in the top toolbar.
| Control | What it does |
|---|---|
| Eye icon | Toggle layer visibility (hidden layers do not export or render) |
| Opacity slider | Per-layer opacity (0–100%) |
| Layer name | Double-click to rename |
| + button | Add a new layer above the active one |
| Trash icon | Delete a layer (with confirmation) |
Each layer has its own undo history (30 steps). Undoing on Layer 2 does not affect Layer 1.
Layer 1 has a warm vellum paper background. Additional layers are transparent.
Mirror Symmetry
Click Mirror in the toolbar to draw symmetrically. A vertical mirror axis appears in the centre of the canvas. Every stroke you draw on the left is mirrored on the right (and vice versa). Useful for facade elevations, symmetric floor plan concepts, and radially symmetric spaces.
Underlay — Tracing Reference
Bring in an existing image as a locked non-editable reference layer:
- Click Import Underlay → select a PNG or JPG
- The image appears below all drawing layers at adjustable opacity (default 35%)
- It cannot be selected, moved, or drawn on — it is tracing paper
Coming from Canvas: On the Canvas page, click Open in Sketch. The current Canvas vector drawing is flattened to JPEG and loaded automatically as the Sketch underlay. Useful for sketching over a precise floor plan to annotate client-facing concepts.
AI Interpret
Click Interpret — the AI reads all visible layers and returns a description of what it sees: room labels, spatial organisation, approximate proportions, and style cues. Takes 5–10 seconds.
Use this before a client presentation to verify the sketch reads clearly, or to generate descriptive text to attach to the project brief.
AI Render
Click Render — the AI generates a photorealistic interpretation of the concept sketch in ~30 seconds.
- Uses the project brief (from the active project in Projects) for style, material, and context cues
- Uses the AI Interpret output as compositional guidance
- The rendered image appears in a panel beside the drawing
- Click Download to save as PNG, or Send to Project to attach it to the project stage
Best used at concept stage, before any detailed modelling. Shows clients what the space could look like without committing to a design.
Send to Project
Click Send to Project → in the top toolbar:
- All visible layers are flattened to a JPEG
- The image is attached to the current stage of the active project (set in the project selector at the top of the page)
- You are navigated to Projects where the stage shows the attached sketch
If no project is active, the flattened image is saved to your session and you are prompted to select a project in Projects.
Download PNG
Click ↓ PNG to download the flattened drawing (all visible layers, including underlay) as a PNG at the current canvas resolution.
Canvas ↔ Sketch Workflow
The two surfaces are designed to be used together:
Sketch (rough concept)
↓ Open in Canvas → Canvas receives sketch as underlay
Canvas (trace + measure)
↓ Export DXF/SVG → Revit / AutoCAD
↓ Export PDF → Issue to consultants
↓ Area CSV → Quantity surveyor / cost planOr in reverse — for annotating a precise plan with client-facing visuals:
Canvas (measured floor plan)
↓ Open in Sketch → Sketch receives Canvas drawing as underlay
Sketch (render + annotate)
↓ Send to Project → Attached to project stage in Projects