Interactive Ink Canvas override default options

Configuration options

All options have sensible defaults. Pass any subset in canvasOptions.configuration to Canvas.load() — unset keys keep their default.

Pen style

penStyle.color"#000000"

any CSS color — #rgb #rgba #rrggbb #rrggbbaa rgb() rgba() hsl() hsla()

Ink stroke color.

penStyle.width2

number (px) — recommended: 1 · 2 · 4 · 8

Stroke width in px.

penStyle.opacity1

0.0 – 1.0

Stroke opacity (optional, defaults to fully opaque).

penStyle.fill"transparent"

any CSS color string

Fill color for closed shapes (optional).

Font style

fontStyle.size"auto"

"auto" · 0.5 · 0.75 · 1

Text size multiplier.

fontStyle.weight"auto"

"auto" · "normal" · "bold"

Text font weight.

Gesture

gesture.surround"select"

select · surround · highlight

Action triggered by a surround stroke.

gesture.strikeThrough"draw"

draw · erase

Action triggered by a strikethrough stroke.

gesture.underline"draw"

draw · thicken

Action triggered by an underline stroke.

gesture.insert"line-break"

line-break · insert

Action triggered by an insert (caret) stroke.

Snap

snap.guidetrue

true · false

Snap moved/resized symbols to guide grid.

snap.symboltrue

true · false

Snap to edges and centers of other symbols.

snap.angle0

0 = free · 45 · 90

Constrain rotation to multiples of this angle (0 = free).

Rendering

rendering.guides.enabletrue

true · false

Show guide grid on the canvas.

rendering.guides.type"point"

"point" · "line" · "grid"

Guide grid style.

rendering.guides.gap50

number (px)

Spacing between guide grid lines/dots.

rendering.minWidth400

number (px)

Minimum canvas width before scrolling.

rendering.minHeight400

number (px)

Minimum canvas height before scrolling.

Selection granularity

selection.textLevel"element"

"element" · "word" · "char"

Tap-selection granularity for text blocks.

selection.mathLevel"element"

"element" · "operand"

Tap-selection granularity for math blocks.

selection.shapeLevel"element"

"element" · "stroke"

Tap-selection granularity for shapes and edges.

Overlays

overlays.showBlockOverlaysfalse

true · false

Always show block borders (instead of only on hover).

overlays.badgeSize20

number (px)

Size of the action badge icon on recognized blocks.

overlays.borderWidth2

number (px)

Width of the selection/hover border.

overlays.panelPadding8

number (px)

Inner padding of floating overlay panels.

overlays.labelMaxChars10

number

Max characters shown in block label badge.

overlays.labelFontSize12

number (px)

Font size of block label badges.

Undo / Redo

undo-redo.maxStackSize100

number

Maximum depth of the undo/redo history stack.

Grabber

grabber.xyFloatPrecision0

0–6

Decimal places kept for pointer x/y coordinates.

grabber.timestampFloatPrecision0

0–6

Decimal places kept for pointer timestamps.

grabber.delayLongTouch500

number (ms)

Hold duration before a touch is treated as long-press.

Math

math.computation.resultMode"draw"

"draw" · "ghost"

draw: result strokes added to the model (interactive, sent to backend). ghost: SVG overlay at 0.5 opacity, not in model.

math.computation.autoComputefalse

true · false

Automatically trigger solver when a math block ends with = or ?.

math.computation.resultColor"#4caf50"

any CSS color string

Color applied to result strokes in both draw and ghost modes.

math.interaction.showDependencyOnHoverfalse

true · false

Highlight variable dependency arrows when hovering a math block.

math.interaction.highlightOnSelectfalse

true · false

Highlight dependent blocks when a math block is selected.

math.interaction.dimOpacity0.3

0.0 – 1.0

Opacity applied to non-selected blocks when dependency highlighting is active.

Other

cssVarsundefined

Record<string, string>

CSS custom properties applied to the canvas root, e.g. { "--ms-ink-primary": "#0070f3" }.

Server

server.scheme"https"

"https" · "http"

Connection protocol.

server.host"cloud.myscript.com"

string

MyScript server hostname.

server.applicationKey""

string (UUID)

MyScript application key.

server.hmacKey""

string | (appKey) => Promise<string>

HMAC secret or async signer function (for server-side signing).

server.version""

string (semver)

Backend version — enables version-gated features (e.g. ≥3.2.0 for JIIX lines).

server.websocket.pingEnabledtrue

true · false

Send periodic pings to keep the WebSocket alive.

server.websocket.pingDelay15000

number (ms)

Interval between ping messages.

server.websocket.maxPingLostCount20

number

Max missed pings before reconnecting.

server.websocket.autoReconnecttrue

true · false

Automatically reconnect on disconnect.

server.websocket.maxRetryCount2

number

Max reconnection attempts before giving up.

server.websocket.fileChunkSize300000

number (bytes)

Max bytes per chunk when sending file data.

Recognition

recognition.lang"en_US"

BCP 47 language tag (e.g. "fr_FR", "ja_JP")

Language used for text recognition.

recognition.gesture.enabletrue

true · false

Enable gesture recognition on the backend.

recognition.gesture.ignoreGestureStrokesfalse

true · false

Exclude gesture strokes from ink content.

recognition.math.solver.angle-unit"deg"

"deg" · "rad"

Angle unit for math solver trigonometric functions.

recognition.math.solver.auto-variable-management.enabletrue

true · false

Automatically manage math variables across blocks.

recognition.math.solver.auto-variable-management.scoping-policy"closest"

"closest" · "last-modified" · "last-edited"

How the solver resolves variable scope across math blocks.

recognition.raw-content.recognition.types["text","shape","math"]

array of "text" · "shape" · "math"

Content types recognized in raw-content mode.

recognition.raw-content.classification.types["text","shape","math"]

array of "text" · "shape" · "math"

Content types classified in raw-content mode.

recognition.raw-content.gestures["underline","scratch-out","strike-through","surround"]

array: "underline" · "scratch-out" · "join" · "insert" · "strike-through" · "surround"

Gesture types detected in raw-content mode.

menu.enabletrue

true · false

Show or hide the entire canvas menu system.

menu.style.enabletrue

true · false + per-item: strokeColor · fillColor · thickness · fontSize · fontWeight · opacity

Style toolbar visibility. Each sub-item is a boolean toggle.

menu.tool.enabletrue

true · false + per-item: write · move · select · erase · shape · edge

Tool toolbar visibility. Each sub-item is a boolean toggle.

menu.action.enabletrue

true · false + per-item: clear · language · undoRedo · zoom · convert · gesture · guide · snap · math · overlay · selection · export · import · minimap

Action toolbar visibility. Each sub-item is a boolean toggle.

menu.context.enabletrue

true · false + per-item: edit · decorator · reorder · export · convert · math · group · duplicate · remove · selectAll

Context menu visibility. Each sub-item is a boolean toggle.

Logger

logger.<CATEGORY>ERROR

DEBUG · INFO · WARN · ERROR

Log level per category. Categories: CANVAS · CLIENT · GRABBER · GESTURE · RENDERER · MODEL · HISTORY · SYMBOL · MENU · MATH · SNAP · TEXT · SELECTION · SYNCHRONIZER · WRITE · MOVE · MANAGER · CONVERTER · TRANSFORMER · KEYBOARD · JIIX_QUERY · SVGDEBUG · SMARTGUIDE · CANVAS_EVENT · STYLE