Wie gestalte ich HTML5-Canvas-Text fett und / oder kursiv?

Ich drucke Text ziemlich einfach auf eine Leinwand:

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

Aber wie kann ich den Text fett, kursiv oder beides ändern? Irgendwelche Vorschläge, um dieses einfache Beispiel zu beheben?

Sie können Folgendes verwenden:

ctx.font = "italic 10pt Courier";

ctx.font = "bold 10pt Courier";

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

Weitere Informationen finden Sie hier:

• Tauchen Sie ein in HTML5
• So zeigen Sie Text auf Leinwand an
• HTML5 Canvas - die Grundlagen

Nur ein zusätzlicher Hinweis für alle, die darüber stolpern: Befolgen Sie unbedingt die in der akzeptierten Antwort angegebene Reihenfolge.

Ich hatte einige browserübergreifende Probleme, als ich die falsche Reihenfolge hatte. "10px Verdana fett" funktioniert in Chrome, jedoch nicht in IE oder Firefox. Das Umschalten auf "fett 10px Verdana" wie angegeben behebt diese Probleme. Überprüfen Sie die Reihenfolge, wenn Sie auf ähnliche Probleme stoßen.

Es gibt also keine Möglichkeit, nur einen JS-Befehl festzulegen font-weight(oder font-sizeoder font-family...). Es muss alles in einer vollständigen Schriftzeichenfolge sein?

Unterstreichen ist durch keine der Canvas-Methoden oder -Eigenschaften möglich. Aber ich habe ein bisschen daran gearbeitet, um es zu erledigen. Sie können es unter http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround überprüfen

Die Implementierung finden Sie hier http://jsfiddle.net/durgesh0000/KabZG/