Open Bug 890733 Opened 6 years ago Updated 3 years ago

Bad quality text rendering in canvas

Categories

(Core :: Canvas: 2D, defect)

23 Branch
x86
Windows XP
defect
Not set

Tracking

()

People

(Reporter: alvaro.segura, Unassigned)

Details

Attachments

(2 files)

Attached image 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.
Can you provide a URL that shows the issue and steps to reproduce?
Flags: needinfo?(alvaro.segura)
Attached file 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)
Flags: needinfo?(alvaro.segura)
I tried Windows 7 and this bug does not show up. Text rendering is OK here.

So it may be Windows XP only.
Attachment #771879 - Attachment mime type: text/plain → text/html
Component: Untriaged → Canvas: 2D
Product: Firefox → Core
Status: UNCONFIRMED → NEW
Ever confirmed: true
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
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/
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/
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?).
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.
You need to log in before you can comment on or make changes to this bug.