I found a really very handy PDF document showing every single available music glyph in the Bravura font, organised by type. Gaze upon it and be amazed by how much notation you don’t know and how very very many types of accidentals there are. I really like the treble clef whose lower stroke ends in a down arrow. I don’t know how I missed it earlier. This is truly the best font ever. I also has letters and numbers and stuff.
I’ve got an example of using Bravura in a canvas. You have to go elsewhere to see it, because it’s downloading the font via @font-face in css and I can’t do that from this blog.
If you look at it, you should see an upside down treble clef. This is from the Bravura font. If you don’t see the treble clef, please leave a comment with what browser you’re using (ex: Internet Explorer), the version number (ex: 4.05), the sort of device (ex: Desktop, laptop, tablet, iphone, etc) and the operating system.
I got that glyph into the canvas by typing the unicode into the string in my text editor. The editor is using a different font, so this is kind of annoying because looking at the text source doesn’t show the result or even the unicode number.
This is an example of an image in a canvas with some text:
Your browser does not support the HTML5 canvas tag.
var c=document.getElementById(“canvas_images”);
var context=c.getContext(“2d”);
var numGlyphs = Math.floor((Math.random()*3)+1) + 1;
var blob = new Image();
var x, y;
context.font = “150% Bravura”;
blob.src = “https://farm8.staticflickr.com/7322/9736783860_4c2706d4ef_m.jpg”
blob.onload = function() {
context.drawImage(blob, 0, 0);
for (var i = 0; i < numGlyphs; i++) {
x = Math.floor((Math.random()*i*50) + 1) +5;
y = Math.floor((Math.random()* 205) + 1) +7;
//1f49b
context.fillText("
