Html5 Canvas Web Font Alignment is off

[shumiyao]

Description

Web Font in Html5 Canvas Alignment (of games developed using Phaser Js library) is off only in Brave (Mac Desktop v. 1.23.71) while there is not any problem in Chrome, Firefox and Safari. Is this a known problem?

Steps to Reproduce

The html5 canvas game showing the problem can be found at https://game.cuckooparrot.com/bonus-jackpot/

Actual result:

Brave Version 1.23.71 (Mac desktop)

Expected result:

Chrome Version 89.0.4389.128 (Mac desktop)

Safari Version 14.0.3 (Mac desktop)

Firefox 85.0 (Mac desktop)

Reproduces how often:

Always.

Brave version (brave://version info)

Brave Version 1.23.71 Stable (Mac desktop)

Brave	1.23.71 Chromium: 90.0.4430.72 (Official Build) (x86_64)
Revision	b6172ef8d07ef486489a4b11b66b2eaeed50d132-refs/branch-heads/4430@{#1233}
OS	macOS Version 11.2.3 (Build 20D91)
JavaScript	V8 9.0.257.17
User Agent	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36
Command Line	/Applications/Brave Browser.app/Contents/MacOS/Brave Browser --enable-dom-distiller --disable-domain-reliability --no-pings --extension-content-verification=enforce_strict --extensions-install-verification=enforce --origin-trial-public-key=bYUKPJoPnCxeNvu72j4EmPuK7tr1PAC7SHh8ld9Mw3E=,fMS4mpO6buLQ/QMd+zJmxzty/VQ6B1EUZqoCU04zoRU= --sync-url=https://sync-v2.brave.com/v2 --lso-url=https://no-thanks.invalid --variations-server-url=https://variations.brave.com/seed --enable-features=PrefetchPrivacyChanges,SafetyTip,AutoupgradeMixedContent,WebUIDarkMode,PasswordImport,ReducedReferrerGranularity,LegacyTLSEnforced --disable-features=AutofillServerCommunication,TextFragmentAnchor,AutofillEnableAccountWalletStorage,IdleDetection,SafeBrowsingEnhancedProtectionMessageInInterstitials,TabHoverCards,DirectSockets,SharingQRCodeGenerator,NetworkTimeServiceQuerying,LangClientHintHeader,NotificationTriggers,WebOTP,SignedExchangeSubresourcePrefetch,SafeBrowsingEnhancedProtection,SubresourceWebBundles,SignedExchangePrefetchCacheForNavigations,BraveDomainBlock --flag-switches-begin --flag-switches-end
Executable Path	/Applications/Brave Browser.app/Contents/MacOS/Brave Browser
Profile Path	/Users/shu/Library/Application Support/BraveSoftware/Brave-Browser/Default
Variations	7146a73c-3f4a17df

[Ayushsunny]

Hello @shumiyao Can I fix this ?

[shumiyao]

@Ayushsunny

The program uses a library called PahserJS.

I will today make a small sample program to demonstrate the problem.

Here is an official sample page by Phaser Js:
https://phaser.io/examples/v3/view/components/data/store-scene-data

I googled further and I found out that it looks like the security feature might have something to do with the behavior.

https://community.brave.com/t/getimagedata-does-not-work-in-brave/43292

According to btlechowski:

Brave has optional feature called Fingerprint protection. 
It will block any methods that could potentially fingerprint your device. 
You probably enabled it.

The problem of misaligned text is gone once I disable the Brave's protection feature.

Protection ON:

Protection OFF:

[rebron]

cc: @pilgrim-brave Farbling issue?

[pilgrim-brave]

That Brave Community post from January 2019 is obsolete; Brave's privacy protection around HTML5 APIs is now significantly more advanced than block/don't block. However, I agree that there is a real, Brave-specific bug here.

[iam-cult]

I would not consider this a problem, I would consider it a feature. This is to protect against canvas fingerprinting, and it can be disabled in settings. Of course canvas elements will look buggy, as the data is given a false value by brave. I don't understand the problem here.

[shumiyao]

I could find a Phaser Js forum thread referring to privacy.resistFingerprinting

According to Telinc1 in the thread:

This is a shot in the dark, but it might be worth investigating. I’ve seen browsers, often Brave, but maybe also Firefox (with privacy.resistFingerprinting enabled?) that intentionally break font rendering due to privacy concerns. If this guess is correct, I don’t think there’s anything you can do about it short of changing the browser settings.

[iam-cult]

Canvas elements are vulnerable to fingerprinting. Brave prevents this by reporting a false/random value. This can be disabled in settings. I don't understand what the problem here is, or how it can be considered a problem at all.

[shumiyao]

Thank you everyone here.

Will post a link to this thread in the forum thread to let people know about this issue.

Maybe developers can add a prompt in those html5 game pages telling Brave users to disable the protection or,

In the thread samme suggests a workaround for PhaserJs (using the Text Metrics).

I have tried the sample and I see that the workaround resolves the issue.