The text shadow on the snapshot is different from the text shadow on the canvas if render transparent in config is true

Phaser 3
1

I would like to create an image with a transparent background using a snapshot, but when I set the transparent to true in the game config, a shadow of text on the snapshot is different from how it looks on the canvas.

Here is my game config:

const gameConfig: Types.Core.GameConfig = {
width: 1280,
height: 720,
type: Phaser.AUTO,
backgroundColor: ‘#24252A’,
render: {
antialias: false,
transparent: true,
},
plugins: {
scene: [
{
key: SpinePlugin,
plugin: window.SpinePlugin,
mapping: ‘spine’,
},
],
},
scene: MainScene,
}

Here is how I use a snapshot functionality:

        game.renderer.snapshot((image) => {
            if (image instanceof HTMLImageElement) {
                const link = document.createElement('a')
                link.href = image.src
                link.download = 'phaser-snapshot.png'
                link.click()
            } else {
                console.error('Unexpected image type')
            }
        })

Example of how it looks like:

different shdow in canvas and snapshot
different shdow in canvas and snapshot1000×1000 41.6 KB

2

I just checked on 3.80.0 with your project settings, I got this result. Perhaps you have something else in your code that affects it?
Screenshot_5

3

Thanks.
My phaser version is 3.55.2. I’ll chek on new phaser version.