Tag: javascript

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("

Today I went to the dentist because my dental surgery from last week was still all swollen and that turns out to not be a good sign. So I picked up some antibiotics and then went to the Goldsmiths degree show, which was interesting and extremely variable. I did not get a lot of creative pacting done today. I read a wee bit about how to declare objects in javascript, which is really easy:

var cleff = {
unicode: "&x#1d11e";
repeats: 1
};

What I really need is just a syntax cheat sheet, since I’m already familiar with most of the concepts of this language. So I skipped ahead to canvases.

Your browser does not support the HTML5 canvas tag.

var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,200,100);
ctx.fillStyle=”#000000″;
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
ctx.fillStyle=”#0000FF”;
ctx.moveTo(0, 32);
ctx.lineTo(200, 32);
ctx.stroke();
ctx.fillText(“unicode?”,32,32)

What the source for that looks like is:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,200,100);
ctx.fillStyle="#000000";
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
ctx.fillStyle="#0000FF";
ctx.moveTo(0, 32);
ctx.lineTo(200, 32);
ctx.stroke();
ctx.fillText("unicode?",32,32)


</script>

I need to learn how to get unicode into those strings. Just typing it in with the ctrl-shift-u thing doesn’t work, nor does typing the html escape sequence. Also, it seems like changing the line colour didn’t work.