Как сделать текст на холсте HTML5 жирным и / или курсивным?

Question

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

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

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

Answer 1

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

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

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

• Погружение в HTML5
• Как отобразить текст на холсте
• HTML5 canvas - основы

Answer 2

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

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

Answer 3

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

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