VexFlow Sandbox

Experiment with VexFlow

by ronyeh

HTML

<script src="https://unpkg.com/vexflow@4.0.1/build/cjs/vexflow-debug.js"></script>
<canvas id="output"></canvas>

CSS

canvas {
	border: 1px solid gray;
}

JavaScript

const canvas = document.getElementById("output");

const { Renderer, Stave, StaveNote, Accidental, GraceNote, GraceNoteGroup, Voice, Formatter, Beam, Stem } = Vex.Flow;

const renderer = new Renderer(canvas, Renderer.Backends.CANVAS);
const context = renderer.getContext();
renderer.resize(520, 210);

const TIME4_4 = {
    num_beats: 4,
    beat_value: 4,
    resolution: Vex.Flow.RESOLUTION,
};

// Create and draw the tablature stave
const stave = new Stave(10, 40, 500);
stave.setContext(context).draw();

function note(params) {
    return new StaveNote(params);
}

const notesA = [
    note({
        keys: ["f/5"],
        stem_direction: Stem.UP,
        duration: "16",
    }),
    note({
        keys: ["f/5"],
        stem_direction: Stem.UP,
        duration: "16",
    }),
    note({
        keys: ["d/5"],
        stem_direction: Stem.UP,
        duration: "16",
    }),
    note({
        keys: ["c/5"],
        stem_direction: Stem.UP,
        duration: "16",
    }),
    note({
        keys: ["c/5"],
        stem_direction: Stem.UP,
        duration: "16",
    }),
    note({
        keys: ["d/5"],
        stem_direction: Stem.UP,
        duration: "16",
    }),
    note({
        keys: ["f/5"],
        stem_direction: Stem.UP,
        duration: "16",
    }),
    note({
        keys: ["e/5"],
        stem_direction: Stem.UP,
        duration: "16",
    }),
];

const notesB = [
    note({
        keys: ["f/4"],
        stem_direction: Stem.DOWN,
        duration: "16",
    }),
    note({
        keys: ["e/4"],
        stem_direction: Stem.DOWN,
        duration: "16",
    }),
    note({
        keys: ["d/4"],
        stem_direction: Stem.DOWN,
        duration: "16",
    }),
    note({
        keys: ["c/4"],
        stem_direction: Stem.DOWN,
        duration: "16",
    }),
    note({
        keys: ["c/4"],
        stem_direction: Stem.DOWN,
        duration: "16",
    }),
    note({
        keys: ["d/4"],
        stem_direction: Stem.DOWN,
        duration:...