VexFlow Sandbox

Experiment with VexFlow

by ronyeh

HTML

<script src="https://unpkg.com/vexflow@4.0.1/build/cjs/vexflow-debug.js"></script>
<p><b>Exploring VexFlow Renderer &amp; Context</b></p>

<div id="output"></div>

CSS

body {
	font-family: Arial, sans-serif;
}

#output svg {
  border: 1px solid gray;
}

JavaScript

const { Renderer, Stave } = Vex.Flow;
const div = document.getElementById("output")
const renderer = new Renderer(div, Renderer.Backends.SVG);
renderer.resize(500, 250);
const context = renderer.getContext();




console.log('context is an instance of: ' + context.constructor.name);

// Most methods are about creating long paths and then stroking or filling them:
context.beginPath() // start recording our pen's moves
  .moveTo(0, 0) // pickup the pen and set it down at X=0, Y=0. NOTE: Y=0 is the top of the screen.
  .lineTo(50, 0) // now add a line to the right from (0, 0) to (50, 0) to our path
  .lineTo(25, 50) // add a line to the left and down from (50, 0) to (25, 50)
  .closePath() // now add a line back to wherever the path started, in this case (0, 0), closing the triangle.
  .fill({
    fill: 'yellow'
  }); // now fill our triangle in yellow.

// Let's draw a circle outline:
context.beginPath()
  .arc(50 /* x */ , 50 /* yCenter */ , 25 /* radius */ , 0 /* startingAngle */ , 2 * Math.PI /* endingAngle */ , false /* counterclockwise */ )
  .stroke();

context.svg.removeChild(context.svg.lastChild);

context.save(); // save the prior style so we can come back to it
context.setStrokeStyle('orange');
context.setLineWidth(20);
context.stroke(); // draw the big orange donut
context.restore(); // and restore the boring color scheme so our stave's lines aren't thick and orange.


// Some methods draw immediately, notably rect & fillRect:
context.rect(85, 50, 50, 50, {
  fill: 'lightgreen'
});

// The above is equivalent to:
/*
context.save();
context.setFillStyle('lightgreen');
context.setStrokeStyle('none');
context.fillRect(85, 50, 50, 50);
context.restore();
*/

const stave = new Stave(110, 60, 90);
stave.setContext(context).draw();