Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML 5 canvas font being ignored

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.

like image 302
The.Anti.9 Avatar asked Jul 28 '10 04:07

The.Anti.9


1 Answers

That this can also happen if you reset the size of the canvas. At least, I saw this in Chrome 23 today.

context.font = 'bold 20px arial';
canvas.width = 100;
canvas.height = 100;
console.log(context.font); // gives '10px sans-serif'
like image 99
Drew Noakes Avatar answered Oct 02 '22 22:10

Drew Noakes