JSFiddle - React, Tailwind, and code Playground

by psycketom

JavaScript

$(function() {
    
    var width = window.innerWidth;
    var height = window.innerHeight;
    
    var vanishing = {
        x : width / 2,
        y : height * 0.4
    };
    
    var displacement = height * 0.5;
    
    var canvas = $( document.createElement('canvas') ).attr({
        width : window.innerWidth,
        height : window.innerHeight
    }).css({
        position : 'absolute',
        
        left : 0,
        top : 0
    }).appendTo( document.body ).each(function() {
        var canvas = $( this );
        
        var context = this.getContext('2d');
        
        context.fillStyle = 'black';
        context.fillRect(0, 0, width, height);
        
        var lines = 30;
        var lineWidth = width / lines;
        
        for (var i = 0; i <= lines; i++)
        {
            context.strokeStyle = 'rgba(255, 255, 255, 0.3)';
            
            var start = {
                x : vanishing.x,
                y : vanishing.y
            };
            
            var end = {
                x : i * lineWidth,
                y : displacement
            };
            
            var length = Math.sqrt( end.x * end.x + end.y * end.y );
            
            var extend = {
                x : (end.x / length) * 10,
                y : (end.y / length) * 10
            };
            
            // extended lines
            context.beginPath();
            
            context.moveTo( start.x, start.y );
            context.lineTo( extend.x, extend.y );
            
            context.stroke();           
            
            // perspective lines
            context.strokeStyle = 'rgba(255, 255, 0, 0.3)';
            
            context.beginPath();
            
            context.moveTo( start.x, start.y );
            context.lineTo( end.x, end.y );
            
            context.stroke();
        }
    });
});