JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<canvas id="perspective" width="600" height="350"></canvas>
<div id="verticses"></div>

CSS

#perspective{
    margin-right: auto;
    margin-left: auto;
}

JavaScript

$(document).ready(function(e) {
	var verticses = [], f;
	function matrix(d, a, b, n){
		var a = a * Math.PI/180, //transforming angle from degrees to radian
            bn = b,
            d1 = d, 
            dn = d1 - ( bn * Math.tan(a)); 
            f = d1/Math.tan(a); //dn distance from vanishing point v
        $("#verticses").append("f = " + f + "<br/>");
		for(i=1; i <=n; i++){
				var bi = bn*d1*(i-1)/(dn*n+(d1-dn)*i-d1);
				var di = d1*dn*(n-1)/(dn*n+(d1-dn)*i-d1);
				var vertics = {
					"x": bi,
					"y": di,
				}
				verticses.push(vertics);
            $("#verticses").append("point (" + i + "): d = " + di + " / b =" +  bi + "<br/>");
		}
	}
	matrix(228, 30, 120, 5);
	
	function drawL(x, y, t, l){
		var xpos = x + l, ypos = t - y;
		ctx.moveTo(xpos, t);
		ctx.lineTo(xpos, ypos);
		ctx.stroke();
	};
	
	var canvas = document.getElementById("perspective");
	var ctx = canvas.getContext("2d");
	$.each(verticses, function(index, value){
		var x = value.x, y = value.y, w = 100, mrg_t = 300;
		drawL(x, y, mrg_t, w);
	});
	ctx.moveTo(0, 300);
	ctx.lineTo(600, 300);
	ctx.stroke();
	ctx.moveTo( f + 100, 300);
	ctx.lineTo(100, 300 - verticses[0].y);
	ctx.stroke();
});