gistfile1.js

// 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();

var stave = new Vex.Flow.Stave(10, 0, 500);
stave.setContext(ctx).draw();

var notes = [
  new Vex.Flow.StaveNote({ keys: ['c/4'], duration: '8'}),
  new Vex.Flow.StaveNote({ keys: ['c/4'], duration: '8'}),
  new Vex.Flow.StaveNote({ keys: ['c/4'], duration: '8'}),
  new Vex.Flow.StaveNote({ keys: ['c/4'], duration: '8'}),
  new Vex.Flow.StaveNote({ keys: ['c/4'], duration: '8'}),
  new Vex.Flow.StaveNote({ keys: ['c/4'], duration: '8'}),
  new Vex.Flow.StaveNote({ keys: ['c/4'], duration: '8'}),
  new Vex.Flow.StaveNote({ keys: ['c/4'], duration: '8'})
];

var gracenote = new Vex.Flow.GraceNote({keys: ['d/4'], duration: '16', slash: true });
var gracenotegroup = new Vex.Flow.GraceNoteGroup([gracenote], true);

notes[0].addModifier(0, gracenotegroup.beamNotes());

var voice = new Vex.Flow.Voice({
  num_beats: 4, 
  beat_value: 4, 
  resolution: Vex.Flow.RESOLUTION
})

voice.addTickables(notes);

var formatter = new Vex.Flow.Formatter();
formatter.joinVoices([voice]).formatToStave([voice], stave);

voice.draw(ctx, stave);