JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

CSS

#canvas1 {
    background-image:url('http://placekitten.com/g/500/500');
    border: 1px solid black;
}

JavaScript

function setup()
{


    var fov = 250;

    var SCREEN_WIDTH = 600; 
    var SCREEN_HEIGHT = 300; 

    var HALF_WIDTH = SCREEN_WIDTH/2; 
    var HALF_HEIGHT = SCREEN_HEIGHT/2; 

    var numPoints = 1000; 


    function draw3Din2D(point3d)
    {  
        x3d = point3d[0];
        y3d = point3d[1]; 
        z3d = point3d[2]; 
        var scale = fov/(fov+z3d); 
        var x2d = (x3d * scale) + HALF_WIDTH;    
        var y2d = (y3d * scale)  + HALF_HEIGHT;
        
        
        c.lineWidth= scale; 
        c.strokeStyle = "rgb(255,255,255)";     
        c.beginPath();
        c.moveTo(x2d,y2d); 
        c.lineTo(x2d+scale,y2d); 
        c.stroke(); 
        
    }

    var canvas = document.getElementById('canvas1');
    var c = canvas.getContext('2d');

    var points = [];

    function initPoints()
    {
        for (i=0; i<numPoints; i++)
        {
            point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200 ];
            points.push(point); 
        }

    }

    function render() 
    {
        c.save();
        
       
        c.clearRect(0, 0, canvas.width, canvas.height);
        
        for (i=0; i<numPoints; i++)
        {
            point3d = points[i]; 
            
            z3d = point3d[2]; 
            z3d-=4; 
            if(z3d<-fov) z3d +=400; 
            point3d[2] = z3d; 
            
            
            draw3Din2D(point3d); 

        }
        c.restore();
        
    }

    initPoints();

    var loop = setInterval(function(){render();}, 50);

}


setup()