VexFlow Sandbox

Experiment with VexFlow

by palaniraja

HTML

<script src="https://npmcdn.com/vexflow/releases/vexflow-debug.js"></script>
<b>This sandbox uses the latest release of the VexFlow NPM.</b>

<div id="boo"></div>

<button onclick="downloadSVG();">Download</button>

CSS

#boo{
  //background: white;
}

JavaScript

VF = Vex.Flow;

// Create an SVG renderer and attach it to the DIV element named "boo".
var div = document.getElementById("boo")
var renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);
		
// Configure the rendering context.
renderer.resize(200, 400);
var context = renderer.getContext();
context.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");

// Create a stave of width 400 at position 10, 40 on the canvas.
var stave = new VF.Stave(0, 0, 400);

// Add a clef and time signature.
stave.addClef("treble");//.addTimeSignature("4/4");



var notes = [
  // A quarter-note C.
  new VF.StaveNote({clef: "treble", keys: ["d/4"], duration: "q" }),

];


// Create a voice in 4/4 and add above notes
var voice = new VF.Voice({num_beats: 1,  beat_value: 4});
voice.addTickables(notes);

// Format and justify the notes to 400 pixels.
var formatter = new VF.Formatter().joinVoices([voice]).format([voice], 400);



// Connect it to the rendering context and draw!
stave.setContext(context).draw();

voice.draw(context, stave);

context.scale(2.5, 2.5); //2x :-)




function exportSVG() {
  var s = new XMLSerializer();
  return s.serializeToString(context.svg); //ctx is the VexFlow SVG rendering context
}

downloadSVG = function () {
  var content = exportSVG();
  var fileName = "vexflow-export.svg";
  var a = document.createElement("a");
  var file = new Blob([content], {type: 'text/plain'});
  a.href = URL.createObjectURL(file);
  a.download = fileName;
  a.click();
}

test = function (){
	alert('Hi there3');
}