HTML 5 canvas font being ignored

Question

I'm trying to write some text to a canvas element, but it seems that the font options I put in are being completely ignored. No matter what I change them to, it all comes out the same, which I believe to be the default 10px sans-serif. Heres what I have (this function runs on load)

function start() {
                canvas = document.getElementById('c');
                ctx = canvas.getContext('2d');
                ctx.fillStyle = "white";
                ctx.font = "12px monospace";
                ctx.textBaseline = "top";
            }

It doesn't work in either Firefox or Chrome.

Answer 1

Your font specified "monospace", which is a category of font. I found this example: context.font = "bold 60px 'Times New Roman', Times, serif"; Can you try that? Let's hope the user has 'Times New Roman' on his or her machine, since you can't embed fonts with HTML.

So basically, you may want to consider specifying an actual font name. Also, since HTML requests every single little image and piece of code and content as a separate bloated HTML request, and it doesn't let you embed fonts (let alone fine-grained control over which characters to embed), and they're rendered differently on every browser anyway, you may want to just try using FLASH.

EDIT: The real answer is that you probably have to set the font each time you acquire the 2D graphics context and draw something. That sounds like a pain in the ass, because it is. You're performing low-level drawing operations to render text. We are SOOOO beyond that today with the availability of a platform like Flash. Anyway, if you set the font, discard the context, then re-acquire it later somewhere else and try to draw again... the font setting will be lost, and you'll have to set the font again and draw before you discard the context. Basically, set the font and draw all your text with it before you discard the context.

Answer 2

As it turns out, the ctx.font change needs to be used in the same function that is doing the fillText()

This makes it work like a charm.