How to enable HTML5 canvas text in Firefox?

Question

I can see canvas (lines, drawings, etc.), but not canvas text in Firefox profile A.

I'm on Firefox 38.0.5 EME-free on Windows 7. I haven't done anything to the Firefox folder. I can see canvas text on my other profile B.

Here's an example of what I want to be able to see: HTML canvas fillText() Method .

• Profile A: the canvas appears as a white rectangle.
• Profile B: I see "Hello World! Big Smile".

I tried about:config and searched for "canvas", but the entries were the same in both my profiles.

In Detecting HTML5 Features - Canvas Text , it says:

Your browser supports the canvas text API

I get these logs in the browser console if I load the w3schools site:

NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsITaskbarTabPreview.invalidate] WindowsPreviewPerTab.jsm:406:0

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. tryit.asp

POST ...w3schoolslink...tags/tryit_view.asp [HTTP/1.1 200 OK 210ms]

The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. tryit_view.asp

And the last two if I click "See Result" on the same w3schools page.

Don't tell me to reset Firefox. I've spent years customizing it just the way I want.

Answer 1

Is it possible that you don't have the used font in both profiles?

I have seen these rectangles as text in cases where I was trying to show "letters" that are not part of the used font. For example I tried to show musical symbols which are defined in unicode, but the most fonts I know don't support them.

Answer 2

Preamble

It seems this issue is not present in Firefox 41.0.1.

Fix1 - TL;DR

Set gfx.direct2d.disabled to false .

Fix2 - Alternative

• When gfx.direct2d.disabled is true
• Set gfx.canvas.azure.backends to cairo

Using Fix1 has the side effect of botching fonts in webpages and view-source (at least for me), while this can be used to keep direct2d disabled while still rendering canvas text.

I tested that after stumbling on this:
Bug 842521 - PDF.js won't render text when DirectWrite is enabled with both Skia and Cairo backends

The long answer for Fix1

While this is not really a programming question, in the hope that it gets migrated rather than deleted, I have a possible solution.

I ran into the same issue where my regular Firefox profile would not display canvas text while a fresh profile had no issue. Using safe mode was also ineffective.

Going through preferences in about:config , I eventually toggled gfx.direct2d.disabled to false and text in canvas was then available after restarting the browser.

The likely cause of gfx.direct2d.disabled being set to true is having disabled hardware acceleration by unchecking Use hardware acceleration when available in Options > Advanced .

Note that toggling that preference alone will not be considered by Firefox to reenable hardware acceleration, as that only happens when changing the pref layers.acceleration.disabled , which has apparently no influence over this issue.