Live example

This page embeds the board exactly as an outside application would, and shows the data it receives at each step.

The board

Data read out

getDocumentJSON() returns the document for loading back later; toSVG() returns a static image to drop into HTML; toPNG() returns a bitmap Blob. Data.

setDocument() reloads the document captured by the most recent getDocumentJSON() press — the drawing returns to exactly that state.

Handing images to the page

This board is initialised with exportMode: 'handoff', so the SVG and PNG buttons hand data to the page instead of downloading a file. Press one to see the payload.

Source of this page

<div id="board"></div>

<script src="https://geogebra.vietify.vn/embed/math-canvas.js"></script>
<script>
  const board = MathCanvas.init('#board', {
    height: 520,
    exportMode: 'handoff',
  });

  board.on('export', (payload) => {
    // payload.format, payload.svg, payload.blob, payload.dataUrl, payload.document
  });
</script>