Sketch Canvas Docs — Whiteboard Architecture, Pen Dynamics & PiP Guide

[01] Overview

Sketch Canvas is a high-performance, 100% client-side digital whiteboard, vector diagramming, and media annotation studio. Built from the ground up to operate without server dependencies or external databases, Sketch Canvas pairs a GPU-accelerated infinite 2D camera engine with a dual-layer hybrid architecture: an in-memory 2D HTML5 Canvas rendering velocity-interpolated Bézier strokes at 2x Retina resolution, and an interactive DOM/SVG vector layer supporting corners-based affine polygon transformations, pastel sticky notes, rich typography, and native video playback with scrubbing. Combined with W3C Document Picture-in-Picture (PiP), Sketch Canvas can detach into an OS-level always-on-top window for annotating over desktop applications.

✓

100% Client-Side Execution: All operations execute inside your browser sandbox. Zero files, color swatches, or code payloads are sent to external servers.

[02] Under The Hood & Browser Engine Architecture

Sketch Canvas coordinates several specialized client-side subsystems to deliver frictionless 60 FPS drawing, continuous zooming, and seamless multitasking:

Infinite 2D Camera Transform & Focal Zoom Engine

Renders the canvas plane using GPU-accelerated `translate3d(panX, panY, 0) scale(zoom)` with `transform-origin: 0 0`. Computes world-space cursor anchors before scaling to provide true 360-degree focal zooming from 2% (0.02) to 500% (5.0) without viewport clipping.

Dual-Layer Hybrid Model (Raster Canvas + DOM Vector)

Separates high-frequency raster brush strokes on an in-memory `<canvas>` buffer from structured DOM/SVG elements (shapes, arrows, sticky notes, text, media), giving users instant stroke responsiveness while retaining full inspectability and editability for diagram objects.

Velocity & Pressure-Sensitive Bézier Interpolation

Smooths rapid cursor and stylus movements using midpoint quadratic Bézier curves (`quadraticCurveTo`). Calculates instantaneous stroke velocity to modulate line widths between 35% and 160%, with stochastic particle scatter for textured graphite pencils and multiply-blend highlighters.

Corners-Based Polygon Transformation Model

Represents every selectable object as a 4-point world-space polygon `[{x,y}, {x,y}, {x,y}, {x,y}]`. Rotations spin around the polygon centroid, while resize handles scale against opposite AABB anchors independently in X and Y to produce authentic affine shearing (parallelogram effects).

Document Picture-in-Picture (PiP) Architecture

Harnesses `window.documentPictureInPicture.requestWindow()` to detach the whiteboard canvas, toolbars, and active drawing state into a native OS always-on-top floating window, re-injecting scoped styles and keyboard event listeners dynamically.

Tight Auto-Crop Composite 2D PNG Serializer

Flattens raster strokes, transformed SVG polygons, styled typography, sticky notes, and media poster frames onto an offscreen canvas cropped tightly around content bounds with 48px padding at high DPI (2x Retina scale).

[03] 1. Infinite Camera Transform & 360° Focal Zooming

### Coordinate System & World Projection The canvas operates on an unbounded Cartesian coordinate plane where drawing coordinates are decoupled from screen pixels. When the camera pans or zooms, screen coordinates $(x_s, y_s)$ map to world coordinates $(x_w, y_w)$ via the inverse camera matrix: $$x_w = \frac{x_s - \text{panX}}{\text{zoom}},\quad y_w = \frac{y_s - \text{panY}}{\text{zoom}}$$ ### Focal Point Zoom Anchor To ensure zooming feels natural and intuitive, the point directly under the user's cursor remains pinned in world space during scaling: $$\Delta z = z_{\text{new}} - z_{\text{old}}$$ $$\text{panX}_{\text{new}} = x_s - x_w \times z_{\text{new}},\quad \text{panY}_{\text{new}} = y_s - y_w \times z_{\text{new}}$$ This guarantees smooth cursor-anchored scaling from **2% (0.02 bird's-eye overview) up to 500% (5.0 ultra-fine detail)** without jumping or drift. ### Multi-Input Navigation - **2-Finger Trackpad Pan**: Swipe two fingers in any direction to pan the camera. - **Pinch-to-Zoom**: Pinch on touchpads or touchscreens for continuous focal zooming. - **Spacebar + Drag**: Hold Spacebar and click-drag anywhere to move the viewport. - **Hand Tool (H)**: Activates dedicated viewport navigation mode. - **Middle Mouse Drag**: Press and hold mouse wheel (`button === 1`) to pan instantly.

[04] 2. Multi-Mode Brush Physics & Velocity Dynamics

Sketch Canvas provides four organic pen engines engineered for diverse sketch and notation styles: ### 1. Fountain Pen (Velocity & Pressure Dynamic) The fountain pen dynamically modulates stroke thickness based on drawing speed and stylus pressure: - Computes Euclidean velocity: $v = \sqrt{\Delta x^2 + \Delta y^2} / \Delta t$. - Applies inverted velocity curve: rapid strokes taper down to $35\%$ of base size; slow deliberate strokes swell up to $160\%$. - Interpolates stroke segments through quadratic Bézier midpoint splines (`ctx.quadraticCurveTo`) to eliminate jagged polylines. ### 2. Marker (Square-Cap Chisel Ink) - Semi-transparent fluid ink with $85\%$ opacity (`rgba`). - Flat square line caps (`lineCap = 'butt'` / `lineJoin = 'miter'`) ideal for architectural callouts and bold headers. ### 3. Pencil (Stochastic Particle Dispersion) - Simulates the physical friction of graphite particles against rough textured paper. - Disperses 8–14 randomized sub-pixel particles within the stroke radius using normal distribution. - Applies stochastic alpha variations between $0.15$ and $0.45$ for authentic sketch textures. ### 4. Highlighter (Multiply Blend Mode) - Executes with `ctx.globalCompositeOperation = 'multiply'` at $45\%$ alpha. - Glides over dark ink, printed text, and diagrams without washing out or obscuring underlying content.

[05] 3. Corners-Based Polygon Transforms & Affine Shearing

### World-Space 4-Corner Polygon Model Traditional web canvas apps store position as an axis-aligned bounding box (`left, top, width, height, rotation`). This breaks down when an object is rotated and subsequently resized, failing to support shearing. Sketch Canvas stores each object as four explicit world-space vertices: ```javascript el._corners = [ { x: x0, y: y0 }, // Top-Left (TL) { x: x1, y: y1 }, // Top-Right (TR) { x: x2, y: y2 }, // Bottom-Right (BR) { x: x3, y: y3 } // Bottom-Left (BL) ]; ``` ### Centroid-Anchored Rotation Rotation calculates the geometric centroid of the four vertices: $$C = \left(\frac{\sum x_i}{4}, \frac{\sum y_i}{4}\right)$$ All vertices are rotated about $C$ by angle delta $\Delta \theta$. Holding **Shift** quantizes $\Delta \theta$ to $15^\circ$ increments. ### AABB-Anchor Shearing Resize When dragging any of the 8 bounding box handles, the opposite corner or edge acts as the fixed anchor point. Vertices are scaled independently along the screen X and Y axes: $$P_i' = \text{anchor} + (P_i - \text{anchor}) \times (s_x, s_y)$$ For rotated shapes, this independent orthogonal scaling creates authentic **affine shearing (parallelogram deformation)**. SVG rectangles render via `<polygon points="...">`, ellipses deform via SVG `matrix()`, and DOM elements (text, sticky notes, media) deform seamlessly via CSS `matrix(a, b, c, d, tx, ty)`.

[06] 4. Vector Diagramming, Pastel Sticky Notes & Media

### Vector Shapes & Directional Arrows - **Rectangles (R) & Ellipses (O)**: Create vector boundaries with customizable stroke widths ($2\text{px}$ to $32\text{px}$) and fill modes (**Outline**, **Tint**, **Solid**). - **Lines (L) & Directional Arrows (A)**: Draw connection vectors. Arrows render dynamic acute barb arrowheads computed via vector normal trigonometry. ### Pastel Sticky Notes (S) - Spawns a $200 \times 180\text{px}$ card with subtle drop shadow and rounded corners. - Features a quick color-switching header supporting 5 curated tones: **Yellow (#fef08a)**, **Green (#bbf7d0)**, **Blue (#bae6fd)**, **Pink (#fbcfe8)**, and **Purple (#e9d5ff)**. - Content is editable in place with handwritten **Caveat** script. ### Media Annotation & HTML5 Video Scrubbing - **Clipboard Paste (Ctrl+V / Cmd+V)**: Paste PNG/JPG images or video files directly onto the board. - **Drag & Drop**: Drop files from desktop file managers onto the canvas. - **Native Video Controls**: Videos embed native HTML5 controls for playing, pausing, and scrubbing while annotating over active frames.

[07] 5. Document Picture-in-Picture (PiP) Floating Architecture

### Native Always-On-Top Window Sketch Canvas implements the **W3C Document Picture-in-Picture API** (`window.documentPictureInPicture`). Unlike standard video PiP which only mirrors a `<video>` stream, Document PiP creates an arbitrary HTML DOM window that floats above all operating system windows (Figma, VS Code, Slack, Zoom). ```javascript const pipWindow = await window.documentPictureInPicture.requestWindow({ width: 960, height: 640 }); // Copy styles and mount canvas tree copyDocumentStyles(document, pipWindow.document); pipWindow.document.body.appendChild(appContainer); ``` ### Dynamic Style & Event Re-injection - Clones all style rules, Google Fonts links, and CSS variables into the floating window's `<head>`. - Binds global keyboard shortcuts (`Ctrl+Z`, `Space`, tool keys) to the PiP window's `keydown` dispatcher. - Automatically repatriates the canvas back to the main document tab when the PiP window is closed.

[08] 6. Composite High-Res PNG Export & 100% Client Privacy

### Tight Content-Bound Cropping Rather than exporting a wasteful 10,000x8,000 canvas with blank margins, Sketch Canvas scans all raster stroke points and DOM object corners to calculate the tight bounding box $[x_{\min}, y_{\min}, x_{\max}, y_{\max}]$. ### Offscreen 2D Composite Rendering 1. Allocates an offscreen `<canvas>` scaled by $\max(2, \text{devicePixelRatio})$ for crisp Retina output. 2. Fills the chosen theme backdrop (Light Paper #f6f3ea or Dark Board #17171b). 3. Blits the raster canvas layer translated by $(-x_{\min} + 48\text{px}, -y_{\min} + 48\text{px})$. 4. Pre-renders all SVG vector shapes via XMLSerializer Data URIs into raster images. 5. Applies affine transformation matrices (`octx.transform(a, b, c, d, e, f)`) for sheared/rotated DOM elements, rendering multiline text with word wrapping. 6. Downloads the PNG directly or writes to the system clipboard via `navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])`.

[SPEC] Technical Specifications & Limits

Parameter / Property	Specification / Value
Rendering Model	Hybrid (2D Raster Canvas + DOM/SVG Vector Layer)
Camera Zoom Range	2% (0.02) to 500% (5.0)
Brush Engines	Fountain Pen, Marker, Pencil, Highlighter, Eraser
Transformation Geometry	Corners-Based 4-Point Polygon Matrix
Multitasking PiP	W3C Document Picture-in-Picture API
Export Resolution	High-DPI (2x Retina devicePixelRatio)
Storage & Persistence	100% Client-Side LocalStorage
Privacy & Network	0 Server Requests, 0 Telemetry Uploads

[KEYS] Keyboard Shortcuts

Select ToolV

Hand Tool / PanH / Space+Drag

Pen ToolP

Eraser ToolE

Arrow ToolA

Rectangle ToolR

Ellipse ToolO

Line ToolL

Text ToolT

Sticky Note ToolS

UndoCtrl + Z / Cmd + Z

RedoCtrl + Shift + Z / Ctrl + Y

DuplicateCtrl + D / Cmd + D

Layer OrderingCtrl + ] / Ctrl + [

Delete ObjectDelete / Backspace

Focal ZoomCtrl + Scroll / Pinch

15° Angle SnapShift + Rotate

Shortcuts Legend? / /

[CODE] Developer Integration & Code Examples

Export Canvas Directly to PNG via CanvasExport

import { exportCanvasAsPNG } from "./utils/canvasExport";

// Automatically calculates tight content bounds and downloads PNG
await exportCanvasAsPNG({
  canvas: document.getElementById("drawCanvas"),
  objLayer: document.getElementById("objLayer"),
  theme: "paper", // "paper" (#f6f3ea) or "dark" (#17171b)
  stateRef: { current: { hasDrawn: true, drawMinX: 100, drawMinY: 100, drawMaxX: 800, drawMaxY: 600 } }
});

Spawn Document Picture-in-Picture Floating Window

if ("documentPictureInPicture" in window) {
  const pipWin = await window.documentPictureInPicture.requestWindow({
    width: 960,
    height: 600,
  });

  // Re-inject stylesheet rules for consistent rendering
  Array.from(document.styleSheets).forEach((sheet) => {
    try {
      const style = pipWin.document.createElement("style");
      style.textContent = Array.from(sheet.cssRules).map(r => r.cssText).join("");
      pipWin.document.head.appendChild(style);
    } catch (e) {
      // Cross-origin stylesheet fallback
      const link = pipWin.document.createElement("link");
      link.rel = "stylesheet";
      link.href = sheet.href;
      pipWin.document.head.appendChild(link);
    }
  });

  // Mount container into floating window
  pipWin.document.body.appendChild(document.getElementById("app"));
}

[FAQ] Frequently Asked Questions

Try Sketch Canvas Online Now

Test all features in your browser with zero installations, zero server uploads, and 100% free offline capabilities.

Open Interactive Tool