This is the code it takes to display one note using the JS VexFlow library (http://www.vexflow.com/) Takes a note with an octave and a name like 'g#'

drawVexNote.js

function drawVexNote(note){
  var renderer = new Vex.Flow.Renderer("note-canvas", Vex.Flow.Renderer.Backends.CANVAS);
  var ctx = renderer.getContext();
  ctx.clear();

  var stave = new Vex.Flow.Stave(0, 0, 100);
  stave.addClef("treble").setContext(ctx).draw();
	
  var vexNote = new Vex.Flow.StaveNote({ keys: [note.name+"/"+note.octave], duration: "w" })
    			
  if(note.name.charAt(1) == "b"){
    vexNote.addAccidental(0, new Vex.Flow.Accidental("b"))
  }elseif(note.name.charAt(1) == "#"){
    vexNote.addAccidental(0, new Vex.Flow.Accidental("#"))
  }
  Vex.Flow.Formatter.FormatAndDraw(ctx, stave, [vexNote]);	
}