Troubleshooting

Text renders as Bảng dựng hình#

The document does not declare its encoding.

<meta charset="utf-8">

The HTTP header beats the meta tag; check the server is not sending a different charset. Serve .js files as Content-Type: text/javascript; charset=utf-8.

MathCanvas is not defined#

The initialisation code runs before the bundle has loaded. The global MathCanvas only exists after the bundle's <script> tag has executed.

MathCanvas: không tìm thấy phần tử "#board"#

The element does not exist yet at the moment init is called.

The board has zero height#

height is applied verbatim to the frame the bundle creates. '100%' resolves against the parent element; with a parent of height auto the frame is 0.

Keyboard shortcuts do nothing#

The default keyboard: 'container' means keys are handled only while document.activeElement is inside the board. Clicking the canvas moves focus there. keyboard: 'window' handles keys at document scope; false turns them off.

setDocument has no effect#

Unreadable input leaves the state unchanged and raises no exception.

if (!MathCanvas.parseDocument(data)) console.warn('Invalid document');

Common cause: passing the API envelope ({ data: … }) instead of the document.

Loaded document is missing shapes#

Shapes were dropped by the sanitising rules. The usual case is a bundle older than the data. Compare MathCanvas.version between where the document was created and where it is opened.

PNG export fails over file://#

The canvas is tainted because every file:// document is its own origin. Serve the page over HTTP.

Layout looks wrong, text stretched, buttons lose their borders#

The bundle resets box-sizing, margin, padding, borders and the inherited text properties within .mc-app, so the host document's global CSS does not reach inside. Two cases still get through:

• A cached older bundle — check MathCanvas.version.
• Host rules targeting the mc- class prefix. Those classes are an internal detail and change between versions.

CSP blocks the interface#

Missing style-src 'unsafe-inline' or img-src data:. See Installation.

The instance stays alive after its element is removed#

The bundle does not detect an element leaving the DOM. The keyboard listener and the ResizeObserver are released only when board.destroy() runs.

Several instances overwrite each other's saved drafts#

Instances sharing a storageKey write to the same localStorage key; the last writer wins.

Narrow screens#

The layout is designed for widths from 900px. Below that the toolbar wraps onto two rows; below 500px the property panel is clipped. There is no mobile layout yet.

The host document's React#

Irrelevant. React 19 lives inside the bundle with its own component tree and reconciler; it neither reads nor writes the host document's React.