Skip to content

Instantly share code, notes, and snippets.

@erichexter

erichexter/bug rendering beams Secret

Created May 14, 2014 01:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save erichexter/457fccd9a4b0ca4c7543 to your computer and use it in GitHub Desktop.
Save erichexter/457fccd9a4b0ca4c7543 to your computer and use it in GitHub Desktop.
Download ZIP
vexFlow drumset example
Raw
bug rendering beams
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery-2.1.0.min.js"></script>
<script src="vexflow-min.js" ></script></script>
<script >
$(function(){
var canvas = $("#stave")[0];
var renderer = new Vex.Flow.Renderer(canvas,Vex.Flow.Renderer.Backends.CANVAS);
var ctx = renderer.getContext();
var stave = new Vex.Flow.Stave(10, 0, 500);
stave.addClef("percussion_small")
.addTimeSignature("4/4",15)
.setContext(ctx).draw();
// Create the notes
var notes = [
new Vex.Flow.StaveNote({ keys: ["f/5"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["f/5"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["c/5", "f/5"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["f/5"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["f/5"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["f/5"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["c/5", "f/5"], duration: "8" }),
new Vex.Flow.StaveNote({ keys: ["f/5"], duration: "8" }),
];
// Create a voice in 4/4
var voice = new Vex.Flow.Voice({
num_beats: 4,
beat_value: 4,
resolution: Vex.Flow.RESOLUTION
});
voice.addTickables(notes);
var bassnotes = [
new Vex.Flow.StaveNote({ keys: ["e/4"], duration: "q", stem_direction: Vex.Flow.StaveNote.STEM_DOWN }),
new Vex.Flow.StaveNote({ keys: ["e/4", ], duration: "qr" }),
// A quarter-note rest. Note that the key (b/4) specifies the vertical
// position of the rest.
new Vex.Flow.StaveNote({ keys: ["e/4"], duration: "8", stem_direction: Vex.Flow.StaveNote.STEM_DOWN }),
new Vex.Flow.StaveNote({ keys: ["e/4"], duration: "8", stem_direction: Vex.Flow.StaveNote.STEM_DOWN }),
// A C-Major chord.
new Vex.Flow.StaveNote({ keys: ["e/4"], duration: "qr" })
];
// Create a voice in 4/4
var voicebass = new Vex.Flow.Voice({
num_beats: 4,
beat_value: 4,
resolution: Vex.Flow.RESOLUTION
});
voicebass.addTickables(bassnotes);
var formatter = new Vex.Flow.Formatter().joinVoices([voice, voicebass]).format([voice, voicebass], 250);
voice.draw(ctx, stave);
var beam = new Vex.Flow.Beam([notes[0], notes[1]]);
voicebass.draw(ctx, stave);
beam.setContext(ctx).draw();
});
</script>
</head>
<body>
<div style="">
<canvas id="stave" width=350 height=120></canvas></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment