JSFiddle - React, Tailwind, and code Playground

by Melnikov_Sergey

HTML

<script src="https://unpkg.com/vexflow/releases/vexflow-min.js"></script>
<div id="music-notebook"></div>

JavaScript

VF = Vex.Flow;

// Создаём SVG рендер и закрепляем его за элементом с ID "music-notebook"
var elem = document.getElementById("music-notebook");
var renderer = new VF.Renderer(elem, VF.Renderer.Backends.SVG);

// Указываем размер:(<ширина>,  <высота>)
renderer.resize(500, 200);

// Получаем контекст рисования
var context = renderer.getContext();
// Создаем нотную строку со следующими параметрами:(<x>, <y>, <ширина>)
var fiveLineStave = new VF.Stave(10, 25, 400);

// Добавляем скрипичный ключ и указываем музыкальный размер
fiveLineStave.addClef("treble").addTimeSignature("4/4");

// Указываем контекст и даём команду рисовать
fiveLineStave.setContext(context).draw();