fillRoundedRect on retina screens isn't rendering right

[nick-tw]

Version

• Phaser Version:3.55.2

• Operating system:iOS 15.3.1

• Browser: Safari 15.3

Description

I created an overlayFade (a black screen with 50% opacity to fade the screen for an on-boarding tutorial screen). I created a mask to cut out a rectangle from the fade screen to highlight items on the screen.

The rounded corners work fine on 1x PC screens but when I view on the iPhone 13 Pro with a high density screen, the corners are not properly rendered.

I used a variable DPR (device pixel ratio) to multiply the values to have consistently sized items.

Example Test Code

                    const { width, height } = this.scale
                    this.overlayFade = this.add.rectangle(width / 2, height / 2, width, height, 0x000000); 
                    this.help1Mask = this.graphics.fillRoundedRect(0, 0, 115*DPR, 38*DPR, 16*DPR).setVisible(false)
                    var geoMask = this.help1Mask.createGeometryMask()
                    geoMask.invertAlpha = true
                    this.overlayFade.setMask(geoMask)

Additional Information

1x screenshot:

3x pixel density screenshot (via xcode iPhone 13 Pro simulator):