How can I draw HTML5 canvas text in bold and / or italic?

Question

I print text on canvas in a fairly simple 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, italics, or both? Any suggestions for fixing this simple example?

Answer 1

You can use any of them:

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

For more information, here are a few resources:

• HTML5 Immersion
• How to display text in canvas
• HTML5 canvas - the basics

Answer 2

Just one more heads-up for anyone who stumbles upon this: don't forget to follow the order indicated in the accepted answer.

I ran into some problems in the browser when I had the wrong order. Having "10px Verdana bold" works in Chrome, but not in IE or Firefox. Switching to "bold 10px Verdana" as indicated eliminates these issues. If you encounter similar problems, double-check the order.

Answer 3

Underscore is not possible using any of the canvas properties or properties. But I did some work to do this. You can check it out @ http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround

You can find the implementation here http://jsfiddle.net/durgesh0000/KabZG/