3

Is there anyway to force off the OS font smoothing behavior when writing text to a canvas. I'm using the Perfect DOS font and it only looks perfect when I have that OS feature disabled. I certainly can't require customers to change their system settings so I'm hoping there's some CSS property or JS hack for the Chrome browser.

It looks like there was a font-smooth property at a point in time but is no longer working with Chrome. Looks perfect in IE11 and Safari mobile my main concern is Chrome on OS X and windows7+. The site is http://webchars.com

Patrick Herlihy
  • 149
  • 8
  • 2
    Looks okay to me here, but I don't have IE11 to compare it to, and all I see is a wall of text in IE9. Without knowing the difference you're seeing, I'd concentrate on including a mute button and/or volume control for that music. Users can attribute a degree of visual difference to the browser, but the inability to easily nuke that obnoxious music will rest firmly on your shoulders in the eyes of your customers. – enhzflep May 17 '15 at 02:47
  • My comment is exactly the same as @enhzflep's. It's Sunday morning here. Everything is quiet. Or, _was_ quiet. – Mr Lister May 17 '15 at 05:14

2 Answers2

3

"Can I turn off antialiasing on an HTML <canvas> element?" still applies today.

If you need "crisp" lines, draw your text at one of the font's known bitmap sizes (if it has any), and draw them on the canvas using (0.5,0.5) offset, so don't draw your text on, say, (10,10), but draw it on (10.5, 10.5). The reason being that the Canvas is NOT a pixel grid. It's actually a view on a subpixel-precision rendering system, so if you draw at integer coordinates, you're actually drawing in between pixels, and things will get antialiassed more than is necessary. Half unit offsets. Start there.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
-1

Solved by using images rather than fonts.

Patrick Herlihy
  • 149
  • 8