Как я могу начертить текст холста HTML5 полужирным шрифтом и/или курсивным?

Я печатаю текст на холсте довольно простым способом:

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

Но как я могу изменить текст на полужирный, курсив или на оба? Любые предложения по исправлению этого простого примера?

Ответы

Ответ 1

Вы можете использовать любой из них:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

Для получения дополнительной информации, вот несколько ресурсов:

Ответ 2

Просто еще один хедз-ап для любого, кто наткнулся на это: не забудьте следовать порядку, указанному в принятом ответе.

Я столкнулся с некоторыми проблемами в браузере, когда у меня был неправильный порядок. Наличие "10px Verdana bold" работает в Chrome, но не в IE или Firefox. Переключение на "жирный 10px Verdana", как указано, устраняет эти проблемы. Если вы столкнулись с подобными проблемами, дважды проверьте порядок.

Ответ 3

Подчеркивание невозможно с помощью любого из свойств холста или свойств. Но я сделал некоторые работы, чтобы сделать это. Вы можете проверить это @http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround

Вы можете найти реализацию здесь http://jsfiddle.net/durgesh0000/KabZG/

Ответ 4

То есть нет способа просто установить font-weight (или font-size или font-family...) в одну команду JS? Все это должно быть в одной полной строке шрифта?