890733 - Bad quality text rendering in canvas

Status: NEW

(Core :: Graphics: Canvas2D, defect)

Description

[Alvaro]

Attachment: canvas-text.png

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:23.0) Gecko/20100101 Firefox/23.0 (Beta/Release)
Build ID: 20130703181823

Steps to reproduce:

Write text in a <canvas> with context.fillText() with several font sizes and families.

Compare that with text in HTML parts using the same sizes and font families.

(In currently on XP, with ClearType enabled)


Actual results:

Text rendering is much lower quality in the canvas. Seems it is not using correct antialiasing or font hinting.

The attachment shows several text samples: HTML left, canvas right. As rendered by Firefox and Chrome.

The Consolas samples show bad hinting, uneven thickness. The Arial sample shows lack of antialiasing, like an old Windows 95 or non-cleartype rendering.


Expected results:

Good text rendering like that in normal page text. Google Chrome does render canvas text just as HTML text.

BTW. This is an issue in the built-in PDF.js viewer.

Comment 1

[Bill Gianopoulos [:WG9s]]

Can you provide a URL that shows the issue and steps to reproduce?

Comment 2

[Alvaro]

Attachment: test page

The attached page was used to create the sample screenshots.

Also this PDF, when viewed on the built-in PDF.js, which uses fillText():
http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf

(BTW, switching PDF.js to use paths and fill()/stroke() to draw gliphs produces much better quality)

Comment 3

[Alvaro]

I tried Windows 7 and this bug does not show up. Text rendering is OK here.

So it may be Windows XP only.

Comment 4

[jason]

This issue is not limited to windows.

I can confirm that in Alvaro's example, the canvas font rendering is worse than the html font rendering on OS X 10.9.2

Comment 5

[dominic]

I can confirm that text rendering looks awful on Firefox but for me it is only on Windows - on OSX Mavericks it looks fine.

On Windows 8 Firefox 29:

http://s4.postimg.org/okw8tx50t/windows_firefox.png

OSX Mavericks Firefox 29 or any other browser:

http://s4.postimg.org/wewufbctp/Screen_Shot_2014_05_24_at_18_36_02.png

Link to page:

http://tfigroup.dominictobias.com/our-work/services/

Comment 6

[dominic]

Here is someone else looks like they have the same issue: http://community.createjs.com/discussions/easeljs/5793-firefox-text-rendering

(In reply to dominic from comment #5)
> I can confirm that text rendering looks awful on Firefox but for me it is
> only on Windows - on OSX Mavericks it looks fine.
> 
> On Windows 8 Firefox 29:
> 
> http://s4.postimg.org/okw8tx50t/windows_firefox.png
> 
> OSX Mavericks Firefox 29 or any other browser:
> 
> http://s4.postimg.org/wewufbctp/Screen_Shot_2014_05_24_at_18_36_02.png
> 
> Link to page:
> 
> http://tfigroup.dominictobias.com/our-work/services/

Comment 7

[mik]

The new version of Google spreadsheets uses canvas to render text, so this problem is more apparent. See https://bugzilla.mozilla.org/show_bug.cgi?id=1029327 (a duplicate?).

Comment 8

[jscher2000]

FYI, this issue is raised by users on SuMo from time to time in the Google Sheets context:

https://support.mozilla.org/questions/1006737 (Windows 8.1)
https://support.mozilla.org/questions/1115110 (Windows 7)

Both users had hardware acceleration disabled, which is the worst case scenario.