Canvas Classes

omdDisplay

Renders a single OMD component into a DOM container. The SVG is sized to fit the content — not the container — and the container aligns it via flexbox.

Constructor

new omdDisplay(container, options)

Options

Methods

render(string)

Parses and renders a math string. Clears any previously rendered content first. Auto-detects equations (strings containing =) vs expressions.

display.render('3*x + 2');      // expression
display.render('2*x + 3 = 7'); // equation (detected by =)

load(component)

Renders a pre-built OMD component. Clears any previously rendered content first.

const line = new omdNumberLine();
line.loadFromJSON({ min: 0, max: 10, dotValues: [6] });
display.load(line);

loadFromJSON(json)

Creates a component from a JSON object (using the factory) and renders it in one step.

display.loadFromJSON({ omdType: 'numberLine', min: 0, max: 10, dotValues: [6] });
display.loadFromJSON({ omdType: 'coordinatePlane', xMin: -5, xMax: 5, yMin: -5, yMax: 5 });

clear()

Removes the current component from the display.

destroy()

Removes the SVG from the DOM, disconnects the resize observer, and marks the instance as destroyed. Call this when removing the display from the page.

Behavior

• The SVG element is sized to (contentWidth × scale) + padding×2 — it wraps tightly around the content rather than filling the container.
• A ResizeObserver watches the container and re-runs layout when it changes size.
• After fonts load (document.fonts.ready), layout is refreshed to account for any text reflow.

Example

const display = new omdDisplay(document.getElementById('my-cell'), {
    alignment: 'center',
    autoScale: true,
    maxScale: 1,
    padding: 12,
});

// From a string
display.render('sqrt(x + 4)');

// From JSON — one line
display.loadFromJSON({ omdType: 'numberLine', min: 0, max: 20, dotValues: [6, 14] });

// From a pre-built component
const plane = new omdCoordinatePlane();
plane.loadFromJSON({ xMin: -5, xMax: 5, yMin: -5, yMax: 5 });
display.load(plane);

omdCanvas

A multi-object SVG stage. Components are added at explicit (x, y) positions and can be moved, scaled, or removed independently.

Constructor

new omdCanvas(container, options)

Options

Methods

add(component, options)

Adds a component to the canvas. Accepts an optional position and scale — or you can position the component beforehand with setPosition and call add with no options.

// Position via add options
canvas.add(plane, { x: 30, y: 60, scale: 1.5 });

// Position beforehand — equivalent
plane.setPosition(30, 60);
canvas.add(plane);

move(component, x, y)

Repositions a previously added component.

canvas.move(plane, 100, 50);

scale(component, s)

Rescales a previously added component.

canvas.scale(line, 0.8);

remove(component)

Removes a specific component from the canvas.

clear()

Removes all components from the canvas.

resize(width, height)

Resizes the canvas SVG.

canvas.resize(1400, 600);

items (getter)

Returns a shallow copy of all added components.

console.log(canvas.items.length);

Example

const canvas = new omdCanvas(document.getElementById('stage'), {
    width: 1100,
    height: 420,
});

const plane = new omdCoordinatePlane();
plane.loadFromJSON({ width: 280, height: 280, xMin: -5, xMax: 5, yMin: -5, yMax: 5 });
canvas.add(plane, { x: 30, y: 60 });

const line = new omdNumberLine();
line.loadFromJSON({ min: 0, max: 10, dotValues: [6] });
line.setPosition(350, 120);
canvas.add(line);

const eq = new omdEquation();
eq.loadFromJSON('2*x + 3 = 7');
canvas.add(eq, { x: 380, y: 340 });

Difference between omdDisplay and omdCanvas