How do I style HTML5 canvas text to be bold and/or italic?

javascript html canvas typography

Ritchie · Mar 1, 2011 · Viewed 77.6k times · Source

I'm printing text to a canvas in a pretty straight forward way:

var ctx = canvas.getContext('2d');
ctx.font = "10pt Courier";
ctx.fillText("Hello World", 100, 100);

But how can I change the text to bold, italic or both? Any suggestions to fix that simple example?

Answer

You can use any of these:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

ctx.font = "italic bold 10pt Courier";

For further information, here are a couple of resources: