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

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?

If you need to allow for variations in formatting, you can set a font style, draw text, measure it using measureText, set a new style, and then draw the next block like this:

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js -->

// get canvas / context
var can = document.getElementById('my-canvas');
var ctx = can.getContext('2d')

// draw first text
var text = '99%';
ctx.font = 'bold 12pt Courier';
ctx.fillText(text, 50, 50);

// measure text
var textWidth = ctx.measureText(text).width;

// draw second text
ctx.font = 'normal 12pt Courier';
ctx.fillText(' invisible', 50 + textWidth, 50);

<!-- language: lang-html -->

<canvas id="my-canvas" width="250" height="150"></canvas>

<!-- end snippet -->

Further Reading

• MDN > Canvas > Drawing text
• formatting individual words with italics