Plain JavaScript

Create View

const view = new Score.WmsView();

Deprecated (v6.1.0): Score.WmsView replaces Score.MRenderContext.
Score.MRenderContext is deprecated and will be removed in a future major release.
Existing code can be migrated by renaming Score.MRenderContext to Score.WmsView.

Set Canvas

Using HTML

<canvas id="canvasId"></canvas>

view.setCanvas("canvasId");

💡

Do not forget to append canvas somewhere!

Programmatically

const canvas = document.createElement("canvas");

view.setCanvas(canvas);

Set Document

view.setDocument(doc);

Set Paint

view.setPaint(paint);

💡

Paint is optional.

Set View Size

There are two ways to affect view size: zoom and staff size.

Set Zoom

Set zoom:

view.setZoom(1.5);

💡

Default zoom if omitted is 1.0.

Set Staff Size

Set view size with given distance between bottom and top staff lines:

view.setStaffSize("40px");

💡

Default staff size is connected to default font size.

⚠️

Using units "cm", "mm", "in", etc. can give unpredictable result depending on device.

Render

view.draw();

Live Example

💡

Use HTML/JS version without React.useEffect(), just add HTML elements before JS code.