如何将 HTML5 canvas 文本设置为粗体和/或斜体？

Question

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 1

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:

• Dive into HTML5
• How to display text in canvas
• HTML5 canvas - the basics

Answer 2

Just an additional heads up for anyone who stumbles across this: be sure to follow the order shown in the accepted answer.

I ran into some cross-browser issues when I had the wrong order. Having "10px Verdana bold" works in Chrome, but not in IE or Firefox. Switching it to "bold 10px Verdana" as indicated fixed those problems. Double-check the order if you run into similar problems.

Answer 3

Underline is not possible through any of the canvas methods or properties. But I did some work around to get it done. 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/

Answer 4

So there's no way to just set font-weight (or font-size or font-family ...) in one JS command? It all has to be in one complete font string?

Answer 5

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:

 // 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);

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

Further Reading

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