Html5 Canvas Web Font Alignment is off

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

[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.

[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.