Plain JavaScript
Use WmsView
Deprecated (v6.1.0):Score.WmsViewreplacesScore.MRenderContext.Score.MRenderContextis deprecated and will be removed in a future major release. Existing code can be migrated by renamingScore.MRenderContexttoScore.WmsView.
// Create view.
const view = new Score.WmsView();
// Set canvas using canvas element id
// Have <canvas id="canvasId"></canvas> in you HTML page
view.setCanvas("canvasId");
// Or create canvas manually
// Do not forget to append canvas to HTML page!
const canvas = document.createElement("canvas");
view.setCanvas(canvas);
// Set document
const doc = new Score.DocumentBuilder().getdocument();
view.setDocument(doc);
// Deprecated (see Paint section): set paint
const paint = new Score.Paint();
view.setPaint(paint);
// Set zoom (optional)
view.setZoom(1.5);
// Set staff size, the distance between bottom and top staff lines (optional)
view.setStaffSize("40px");
// Render view
view.draw();
⚠️
Using staff size with units "cm", "mm", "in", etc. can give unpredictable result depending on device.