Firefox canvas 2d text translucent effect different from chrome

Question

I have a situation that I use a canvas element to draw a matrix effect and the color of the matrix code text is brighter and sharper in Firefox than Chrome:

As you can see, the text in Chrome is smoother, with some blur, which is what I want.

HTML5 matrix effect: http://thecodeplayer.com/walkthrough/matrix-rain-animation-html5-canvas-javascript

The only thing I can guess is that maybe Firefox does not like the way the translucent effect is achieved:

//Black BG for the canvas
//translucent BG to show the trail

this.ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
this.ctx.fillRect(0, 0, this.$c.width(), this.$c.height());

this.ctx.fillStyle = this.color; //green text

Why is that happening? Is there a way to fix that kind of behavior in firefox by a proper way other than detecting and setting a different color for each browser?

EDIT:

The drawing code with the translucent effect:

//drawing the characters
function draw()
{
    //Black BG for the canvas
    //translucent BG to show trail
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.fillStyle = "#0F0"; //green text
    ctx.font = font_size + "px arial";
    //looping over drops
    for(var i = 0; i < drops.length; i++)
    {
        //a random chinese character to print
        var text = chinese[Math.floor(Math.random()*chinese.length)];
        //x = i*font_size, y = value of drops[i]*font_size
        ctx.fillText(text, i*font_size, drops[i]*font_size);

        //sending the drop back to the top randomly after it has crossed the screen
        //adding a randomness to the reset to make the drops scattered on the Y axis
        if(drops[i]*font_size > c.height && Math.random() > 0.975)
            drops[i] = 0;

        //incrementing Y coordinate
        drops[i]++;
    }
}

setInterval(draw, 33);

Latest firefox version: 49.0.2

EDIT2:

Checked it from another computer with Firefox 39 and an old 17" TFT screen. Firefox still has not the translucent effect and the letters are bright and sharp:

UPDATE:

It appears that this is a Windows Firefox/Chrome behavior and it does not occur on macOS versions. Here is an image link with both browsers opened on macOS Mountain Lion: macOS ML Screenshot

UPDATE2:

After some search and tests, it turns out it is a font issue and how Chrome renders the characters:

To me, that looks like a totally different font. Chrome renders the letters using pointy ends, but Firefox uses a more solid and bold effect. Just tried to change the font on the ctx.font like ctx.font = "normal normal " + font_size + "px arial" but it does not make any difference.

Answer 1

As you realized on your last update text rendering is not guaranted to produce identical (pixel-level) results across browsers and operative systems.

Factors involved are the browser, the OS and the font.

The algorythms to render the font may be (usually are) different.

Some browsers use the OS to render the font some others (on some OSes) render the font with their own rendering implementation.

The smaller is the font size the more evident are differences.

See also: https://stackoverflow.com/a/30878469

I confirm I get same results on Mac OS X 10.9.5 with the example provided.

But even on Mac OS X I've experienced font rendering differences when using different browsers.

---

In case you need to achieve pixel level consistency in the situation posted you can use small PNG-24 images (representing the text characters) instead of text. In fact only few different characters are used and this makes possible a "sprite" vs text solution.

Answer 2

I took the path of creating a new font to reduce the font size. I replaced Regular ASCII symbols with some Unicode Chinese symbols. I used some chars of this pointy curly font Sim Sun, which has almost all of the Chinese unicode characters and with original TTC filesize of 13.4MB (It’s for demonstration purpose only, I don’t know if it’s copyrighted or not):

I could use any random chinese characters, but I used this javascript console code to get the corresponding unicode hexadecimal values of the characters I already have:

$.each(chinese.split(''), function(index, char) {
    console.log(char, char.charCodeAt(0).toString(16));
});

Then I opened the font to a font editor, search/find by char hex code, copy/paste the chinese char to standar ASCII chars from A to Z and a to z:

I ended up with a font file size of 25KB (OTF). I used https://www.fontsquirrel.com to generate all CSS compatible fonts (EOT, SVG, TTF, WOFF, WOFF2, total size 180KB), downloaded the package and include the fonts and the CSS to a demonstration html file. Then I just changed the font-family name to the canvas c.getContext("2d") ctx object to the name of the new imported font simsun_matrixregular (the name of the imported font):

ctx.fillStyle = "#0F0"; //green text
ctx.font = font_size + "px simsun_matrixregular";

and changing the chinese string variable from real chinese characters, to ASCII [A-Za-z]:

//var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";
var chinese = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

and now everything is displaying properly! Chrome and Firefox in windows as Chrome and Safari in OSX, all display the same result! (Almost the same. At least very close)

Windows 10, Chrome/Firefox:

OSX 10.11, Chrome/Safari:

You can check the demo page and the source code here.

Caution, the font has to be fully loaded, else the browser will draw the corresponding ASCII characters [A-Za-z] until it loads the font:

Maybe this whole thing is an overkill and too much work for such a detail, but at least I want to know how to make something like this to have the same effect to all browsers.