Draw grid ...
Grid start sp=10 x1=0 x2=510 y1=0 y2=300
Draw staff 1 ...
Draw note 1 ...
Note: [70,100] sc=1 stem=d flag=0
Draw black note head ...
NoteHead: x=[70,100] w=3 sc=1 hclr=black
NoteHead: Filled note head.
Draw note stem ...
Down black stem for stem='d'
NoteStem: [40,105] h=160 w=5 sc=1 sclr=black
Down stem for stem='d'
NoteStem: moveTo(42.5,105) ...
NoteStem: CR=[42.5,105] top=105
NoteStem: lineTo(42.5,265) ...
Draw note 2 ...
Note: [140,125] sc=1 stem=d flag=0
Draw #A00 note head ...
NoteHead: x=[140,125] w=3 sc=1 hclr=#A00
Draw note stem ...
Down #A00 stem for stem='d'
NoteStem: [110,130] h=160 w=5 sc=1 sclr=#A00
Down stem for stem='d'
NoteStem: moveTo(112.5,130) ...
NoteStem: CR=[112.5,130] top=130
NoteStem: lineTo(112.5,290) ...
Draw note 3 ...
Note: [210,150] sc=1 stem=n flag=0
Draw #0A0 note head ...
NoteHead: x=[210,150] w=3 sc=1 hclr=#0A0
Draw note stem ...
No stem for stem='n'
NoteStem: [210,150] h=160 w=5 sc=1 sclr=#0A0
No stem for stem='n'
NoteStem: moveTo(210,150) ...
NoteStem: CR=[210,150] top=150
NoteStem: lineTo(210,150) ...
Draw note 4 ...
Note: [280,175] sc=1 stem=u flag=0
Draw #00A note head ...
NoteHead: x=[280,175] w=3 sc=1 hclr=#00A
Draw note stem ...
Up #00A stem for stem='u'
NoteStem: [310,170] h=160 w=5 sc=1 sclr=#00A
Up stem for stem='u'
NoteStem: moveTo(307.5,10) ...
NoteStem: CR=[307.5,170] top=10
NoteStem: lineTo(307.5,170) ...
Draw note 5 ...
Note: [350,200] sc=1 stem=u flag=0
Draw black note head ...
NoteHead: x=[350,200] w=3 sc=1 hclr=black
NoteHead: Filled note head.
Draw note stem ...
Up black stem for stem='u'
NoteStem: [380,195] h=160 w=5 sc=1 sclr=black
Up stem for stem='u'
NoteStem: moveTo(377.5,35) ...
NoteStem: CR=[377.5,195] top=35
NoteStem: lineTo(377.5,195) ...
Done.

---

Based on examples found at "http://diveintohtml5.org/canvas.html" and "https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas".