Strange effect with pixelart

Phaser 3
2

Setting pixelArt:true is a good thing and should be enough, but you might want to have a look at additionnal settings to make sure it’s fully pixelated. For my pixel art game, I use the following:

pixelArt: true,
antialias: false,
autoRound: true,
roundPixels: true,

Although the pixelArt setting already does the job, I added these CSS properties on the canvas in my stylesheet:

#game-div canvas
{
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

Also, I see you have a callback function that sets canvas width and height to 100%. Maybe it stretches it and causes the unwanted pixels to appear?

Instead of doing that 100% thing, you could use Phaser’s scale setting in your config, to FIT the screen. In the end, your config would look like this:

var config = {
    // type: Phaser.WEBGL, //android
    type: Phaser.CANVAS, //pc
    scale: {
        mode: Phaser.Scale.FIT,
        parent: 'game-div',
        width: data.w,
        height: data.h
    },
    backgroundColor: '#222222',
    pixelArt: true,
    antialias: false,
    autoRound: true,
    roundPixels: true,
    physics: {
        default: 'arcade',
        arcade: {
            fps: 60,
            gravity: {
                y: 0,
                x: 0,
            },
            debug: false,
        }
    },
    scene: [Boot, Splash, First_screen, Test, Main]
}

If you really want your canvas to cover the whole window without stretching it, try ENVELOP instead of FIT. In that case, part of the canvas will most likely be out of the window boundaries, hence invisible.