Skip to main content

Score View

React Component

Import react-ui subpath module.

import * as ReactUI from "web-music-score/react-ui";

In your TSX/JSX source file add score view component to draw score.

<ReactUI.MusicScoreView doc={doc} />

Plain JavaScript

Import score subpath module:

import * as Score from "web-music-score/score";

Draw score.

const rc = new Score.MRenderContext(); // Create render context
rc.setCanvas("scoreCanvasId"); // Set canvas (can be HTML element or element id)
rc.setDocument(doc); // Set document to render
rc.draw();

If you call setCanvas with a canvas element id you need to declare it for example in HTML document.

<canvas id="scoreCanvasId"></canvas>