VexFlow
|
VexTab
|
TabDiv
|
VexMachines
|
Posters
|
0xfe
The VexFlow Sandbox
A live editor for experimenting with VexFlow
pre-pre-pre-alpha by
0xfe
.
Have some fun!
Try out the VexFlow API in this live editor.
// Get the rendering context var canvas = $("div.sandbox div.sandbox canvas")[0]; var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS); var ctx = renderer.getContext(); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.setFont("Arial", 10, "").setBackgroundFillStyle("#eed"); // Create and draw the tablature stave var tabstave = new Vex.Flow.TabStave(10, 0, 500); tabstave.addTabGlyph(); tabstave.setContext(ctx).draw(); // Create some notes var notes = [ // A single note new Vex.Flow.TabNote({ positions: [{str: 3, fret: 7}], duration: "q"}), // A chord with the note on the 3rd string bent new Vex.Flow.TabNote({ positions: [{str: 2, fret: 10}, {str: 3, fret: 9}], duration: "q"}). addModifier(new Vex.Flow.Bend("Full"), 1), // A single note with a harsh vibrato new Vex.Flow.TabNote({ positions: [{str: 2, fret: 5}], duration: "h"}). addModifier(new Vex.Flow.Vibrato().setHarsh(true).setVibratoWidth(70), 0) ]; Vex.Flow.Formatter.FormatAndDraw(ctx, tabstave, notes);
Confused? Go read the
tutorial
.