javascript - quitar - negrita en html5

¿Cómo doy estilo al texto del lienzo HTML5 para que sea negrita y/o cursiva?

Question

Estoy imprimiendo texto en un lienzo de una manera bastante directa:

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

¿Pero cómo puedo cambiar el texto a negrita, cursiva o ambos? ¿Alguna sugerencia para arreglar ese simple ejemplo?

Answer 1

El subrayado no es posible a través de ninguno de los métodos de lienzo o propiedades. Pero trabajé un poco para lograrlo. Puede verificarlo @ http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround

Puede encontrar la implementación aquí http://jsfiddle.net/durgesh0000/KabZG/

Answer 2

Puedes usar cualquiera de estos:

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

Para obtener más información, aquí hay un par de recursos:

• Sumérgete en HTML5
• Cómo mostrar texto en lienzo
• Lienzo HTML5: conceptos básicos

Answer 3

Solo un aviso adicional para cualquiera que tropiece con esto: asegúrese de seguir el orden que se muestra en la respuesta aceptada.

Me encontré con algunos problemas de navegador cruzado cuando tenía el orden equivocado. Tener "10px Verdana bold" funciona en Chrome, pero no en IE o Firefox. Cambiar a "bold 10px Verdana" como se indica solucionó esos problemas. Vuelva a verificar la orden si se encuentra con problemas similares.