JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.1/phaser.min.js"></script>
<div id="game_area"></div>

JavaScript

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'game_area', { preload: preload, create: create, render: render });

var distance = 300;
var speed = 6;
var max = 500;

var canvas;

var xx = [];
var yy = [];
var zz = [];

function preload() {
    game.time.advancedTiming = true;

}

function create() {
		//	Create our bitmapData which we'll use as a Sprite texture
		var bmd = game.add.bitmapData(4, 4);

		//	Fill it
    var grd = bmd.context.createLinearGradient(0, 0, 0, 4);

    grd.addColorStop(0, '#8ED6FF');
    grd.addColorStop(1, '#004CB3');
    bmd.context.fillStyle = grd;
    bmd.context.fillRect(0, 0, 4, 4);

    //	Put the bitmapData into the cache
    game.cache.addBitmapData('blueShade', bmd);
    
    canvas = game.add.bitmapData(800, 600);
    canvas.addToWorld();

    for (var i = 0; i < max; i++)
    {
        xx[i] = Math.floor(Math.random() * 800) - 400;
        yy[i] = Math.floor(Math.random() * 600) - 300;
        zz[i] = Math.floor(Math.random() * 1700) - 100;
    }

}

function render() {

    
    canvas.clear();

    for (var i = 0; i < max; i++)
    {
        var perspective = distance / (distance - zz[i]);
        var x = game.world.centerX + xx[i] * perspective;
        var y = game.world.centerY + yy[i] * perspective;

        zz[i] += speed;

        if (zz[i] > 300)
        {
            zz[i] -= 600;
        }

        //  Swap this for a standard drawImage call
        canvas.draw(game.cache.getBitmapData('blueShade'), x, y);
    }
    
    game.debug.text(game.time.fps || '--', 2, 14, "#00ff00");
}