Host DOM element that will contain the canvas layers
Optionaloptions: TInteractiveInkCanvasOptions
Canvas options: configuration, CSS vars, manager overrides
WebSocket client handling real-time communication with the MyScript backend.
Manages smart connectors and anchor-based endpoint updates.
Converts ink strokes to recognized text, math, or shape symbols.
ReadonlydomStatic utility class for creating DOM elements.
Handles erasing strokes and symbols via pointer interaction.
Event bus for subscribing to canvas lifecycle and content events.
Static ReadonlyEXPORT_Detects and processes touch/pointer gestures (scratch-out, join, insert, etc.).
Manages undo/redo history stack for all symbol changes.
OptionalinfoServer API information (version, etc.) loaded on first connection.
Queries and maps JIIX data to local symbols for math/text label resolution.
Handles keyboard shortcuts and hotkey-based tool switching.
DOM layer manager handling rendering, UI, and modal elements.
Logger instance for this canvas.
Manages math recognition: variables, computation, and evaluation rendering.
Manages the floating UI menu (tool selector, style panel, action buttons).
Handles canvas panning when the Move tool is active.
Manages all visual overlays: math/text block indicators, debug visualizations.
Static ReadonlyPASTE_Replays a recorded set of strokes with play/pause/speed control.
SVG renderer responsible for drawing symbols onto the canvas layer.
Handles symbol selection, selection group rendering, and hit-testing.
Manages snapping behavior for symbols during move/resize operations.
Synchronizes the local model with the JIIX export from the backend client.
Orchestrates translate, resize, and rotation transforms on selected symbols.
Manages text and math symbol layout: bounds computation and reflow after edits.
Handles ink input: captures pointer events and creates strokes.
Static ReadonlyZOOM_Active canvas configuration (recognition, rendering, menu, math, etc.).
Derived, UI-oriented canvas state — see TCanvasConnectionState.
Listen to event.addConnectionStateChangedListener for change notifications.
Promise that resolves when the WebSocket session is fully initialized. Await this before calling any recognition methods.
True while strokes are queued locally waiting for reconnection.
Listen to event.addConnectionStatusChangedListener for change notifications.
Current symbol model containing all ink, text, math, and shape symbols.
Current pen style applied to new strokes. Setting this merges the provided partial style with the current style.
Whether real pointer input (write/erase/select/move) is currently blocked - see readOnly setter.
Block or restore real pointer input across every tool at once (write/erase/select/move all
attach through layers.rendering), and reflect it with a "not-allowed" cursor. Used e.g. by
canvas.playback so a replayed stroke can't race the user's own input.
Apply a partial rendering configuration at runtime. Triggers a resize and guide-row recompute.
Partial rendering config to merge
Active editing tool.
Setting this switches cursor style, attaches/detaches the corresponding manager,
clears selection, and emits a toolChanged event.
ProtectedbuildProtectedbuildBuild a symbol from partial data
Partial symbol data
Complete symbol instance
Change the order of a symbol in the rendering stack
Symbol to reorder
New position (first, last, forward, backward)
Change the order of multiple symbols in the rendering stack
Symbols to reorder
New position (first, last, forward, backward)
Clear all content from the canvas
Promise that resolves when cleared
ProtectedclearForce label fully inactive regardless of how many startOperation calls are pending.
For level-triggered signals with a single external "done" event (e.g. the client's
idle event) rather than one end call per start call.
Convert specific symbols, or all symbols if none specified
Optionalsymbols: TSymbol[]
Symbols to convert (defaults to all symbols)
Promise that resolves when conversion is complete
Copy selected symbols (or all symbols if nothing selected) to the internal clipboard
Create a symbol from partial data
Partial symbol data
Promise resolving to created symbol
Create multiple symbols from partial data
Array of partial symbol data
Promise resolving to array of created symbols
Cut selected symbols: copy them to clipboard, then remove from model
Destroy the canvas and clean up resources
Promise that resolves when destruction is complete
Download symbols as JSON file, either all symbols or only selected ones
Whether to download only selected symbols (default: false, downloads all symbols)
Download symbols as PNG file, either all symbols or only selected ones
Whether to download only selected symbols (default: false, downloads all symbols)
Download symbols as SVG file, either all symbols or only selected ones
Whether to download only selected symbols (default: false, downloads all symbols)
Download symbols as plain text file, either all symbols or only selected ones
Whether to download only selected symbols (default: false, downloads all symbols)
Mark one occurrence of label as finished. Must be paired with a prior startOperation.
Export content to specified MIME types
OptionalmimeTypes: string[]
Array of MIME types to export
Promise resolving with exports
ProtectedextractProtectedgetGet the current viewport zoom level.
Current zoom factor (1.0 = 100 %)
ProtectedhandleWhether label is currently active (at least one unmatched startOperation call).
Import strokes from point events
Array of partial stroke data
Promise resolving to updated model
ProtectedmanageOnly relevant for WebSocket-backed canvas; other variants never call this.
Display an error in the canvas overlay and emit an error event.
Error to display and emit
ProtectedmanageThe client's idle event only fires in response to an explicit
client.waitForIdle() call (a request/response pair, not a push notification) — it does
NOT fire automatically after every addStrokes()/transform/etc. So it cannot be used to end
a "Recognizing" operation reliably. This only preserves the public event.emitIdle passthrough
for consumers who call waitForIdle() themselves.
ProtectedmarkCalled once the canvas has connected to its backend for the first time.
ProtectedonProtectedonWith ignoreGestureStrokes the backend never emits a contentChanged for a gesture stroke,
so the debounced synchronize scheduled by onContentChanged has nothing left to reschedule it -
force one here instead of relying on that mechanism.
Shift the viewport by the given pixel delta without changing zoom.
Horizontal offset in pixels (positive = pan right)
Vertical offset in pixels (positive = pan down)
Paste clipboard symbols at an offset and select them
Remove a symbol from the model
ID of symbol to remove
Whether to add to history (default: true)
Promise that resolves when symbol is removed
Remove multiple symbols from the model
Array of symbol IDs to remove
Whether to add to history (default: true)
Promise that resolves when symbols are removed
Resize the canvas
New height and/or width
Promise that resolves when resize is complete
Select symbols by their IDs
Array of symbol IDs to select
Select all symbols
ProtectedsetOn top of the base badge tracking, cancels the pending debounced synchronize() as soon
as a new gesture starts - so a stroke/transform beginning right as the debounce timer would
otherwise fire never races it (it'll be rescheduled once that gesture's own content change
comes in).
ProtectedstartProtectedstopSynchronize strokes with JIIX export
Run fn, marking label as an active operation for the duration (shown on the canvas
state badge tooltip). Safe against overlapping/concurrent calls with the same or different
labels, and against fn throwing (the operation is always ended).
ProtectedtriggerUnselect all currently selected symbols
Update layer UI with debouncing
Debounce timeout in milliseconds (default: 500ms)
Update style of multiple symbols
Array of symbol IDs to update
Partial style to apply
Whether to add to history (default: true)
Update font style of text symbols
Array of text symbol IDs
Font style options (fontSize, fontWeight)
Wait for the client to become idle
Promise that resolves when idle
Set the viewport zoom level, optionally anchored to a point.
Target zoom factor (e.g. 1.5 = 150 %)
OptionalcenterX: number
X coordinate to zoom around (pixels, default: viewport center)
OptionalcenterY: number
Y coordinate to zoom around (pixels, default: viewport center)
Zoom and pan the view to fit the given symbols (or all symbols) within the viewport. Resets to zoom 1 if there are no symbols.
Optionalsymbols: TSymbol[]
Symbols to fit (default: all model symbols)
Apply or replace CSS custom properties on the canvas root element.
Clears all existing --ms-ink-* properties first, then sets the provided vars.
Does not reinitialize — current model and session are preserved.
Pass undefined to reset to stylesheet defaults.
Create and attach an InteractiveInk canvas to the given DOM element. Use
Canvas.load()instead of calling this constructor directly.