2

When drawing italicized text in canvas, Firefox would render them as normal for fonts like Impact.

var ctx = canvas.getContext('2d');
ctx.font = "italic 40px Impact";
ctx.fillText("Impact", 0, 40);

View on jsFiddle

Firefox

Chrome

Any ideas how to solve this?

Antony
  • 14,900
  • 10
  • 46
  • 74

1 Answers1

1

This is because Impact doesn't come with an italic version. You can see this when you view it in a font viewer (like Mac Font Book). Browsers fake the italics on fonts that don't have it, but Firefox is not yet faking it in the canvas. If you try a font that has italics, like Arial, it works in the canvas.

There's some discussion about this here: Italic doesn't work on all fonts in Firefox

Demo: jsFiddle

ctx.font = "italic 40px Arial";

with arial

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
  • I know it is font-specific and I have read that discussion as well. I was thinking if there are any workarounds for it. – Antony Feb 28 '13 at 08:08
  • 2
    The only workaround I know of is to skew text manually by skewing canvas context before rendering the text. – kangax Mar 01 '13 at 02:36