Firefoxのcanvas上でフォントの斜体(italic)が効かないなら斜めにして書けばいいじゃない

Firefoxではcanvas上にテキストを描画する際、斜体(italic)の指定が効かない場合があります。
(Firefox 36.0で確認)

Firefoxではcanvas上でフォントの斜体が効かない - Qiita
http://qiita.com/gonshi_com/items/59bfcefe8f67075f446d

つまり、italic体を持つフォントの場合(Arial等)は斜めになりますが、italic体を持たないフォント(ＭＳ Ｐゴシック等)はitalicを指定しても斜めになりません。

var ctx = canvas.getContext('2d');
ctx.font = 'italic 20px';
ctx.fillText('hoge', x, y); // Firefoxだと斜めにならない

Firefoxでも斜めに表示したい場合もあるでしょう。そういう時はcanvasを斜めにして書けばいいのです。setTransform を使って
canvasを斜めにします。斜めになっているcanvasに文字を書けば、斜めの文字になります。

ctx.setTransform(1, 0, 0, -1/3, 1, y/3, 0);
ctx.fillText('hoge', x, y); // 変形されたカンバスに出力
ctx.setTransform(1, 0, 0, 1, 0, 0); // 変形を元に戻す

setTransform は変換行列を使って座標系の変形を行うメソッドです。

setTransform(a, b, c, d, e, f) - Canvasリファレンス
http://www.htmq.com/canvas/setTransform.shtml

setTransform の引数の詳細についてはリンク先をご覧ください。何をやっているかというと、斜体の傾きは約1/3(ブラウザではy軸は上から下なので-1/3)、傾きの変更によって、y座標に比例してx座標が移動してしまうので位置の調整(第5引数でy/3を指定)しています。

これでitalic体をFirefoxでシミュレートできます。