Installation
Files#
| File | Format | URL |
|---|---|---|
math-canvas.js |
UMD | https://geogebra.vietify.vn/embed/math-canvas.js |
math-canvas.mjs |
ESM | https://geogebra.vietify.vn/embed/math-canvas.mjs |
math-canvas.css |
CSS | https://geogebra.vietify.vn/embed/math-canvas.css |
UMD and ESM both embed the stylesheet and inject a <style> tag at runtime.
math-canvas.css is only for setups that must load CSS separately.
UMD#
<script src="https://geogebra.vietify.vn/embed/math-canvas.js"></script>
Defines the global MathCanvas.
ESM#
import MathCanvas, { init, parseDocument } from 'https://geogebra.vietify.vn/embed/math-canvas.mjs';
HTML attributes#
Elements carrying data-math-canvas are initialised on DOMContentLoaded.
<div data-math-canvas data-height="420" data-canvas-bg="white"></div>
| Attribute | Option |
|---|---|
data-document |
document (JSON string) |
data-height, data-width |
height, width |
data-storage-key |
storageKey |
data-canvas-bg |
canvasBg |
data-auto-label |
autoLabel |
data-show-hints |
showHints |
data-keyboard |
keyboard |
data-auto-focus |
autoFocus |
data-fonts |
fonts |
MathCanvas.initAll() rescans; elements that already have an instance are
skipped.
Character encoding#
The bundle contains UTF-8 strings. A <script> tag without its own charset is
decoded using the encoding of the embedding document, so a document that
declares the wrong encoding renders the interface as mojibake.
Fonts#
The bundle injects one <link> to Google Fonts (Archivo, Lora) per document.
With { fonts: false } it makes no network request at all and the interface
falls back to system fonts.
Content Security Policy#
| Directive | Value | What needs it |
|---|---|---|
style-src |
'unsafe-inline' |
CSS injected at runtime |
img-src |
data: |
PNG export renders through a data: image |
style-src |
https://fonts.googleapis.com |
Only when fonts is on |
font-src |
https://fonts.gstatic.com |
Only when fonts is on |
React inside the bundle#
React 19 ships inside the bundle and is isolated from the host document's React. The bundle works whether or not the page uses React, at any version.
Browsers#
Chrome / Edge 88+, Safari 14+, Firefox 78+. The bundle uses ResizeObserver,
Pointer Events and the :where() selector.
The interface is laid out for widths from 900px. Below that the toolbar wraps onto two rows; below 500px the property panel is clipped.