JSFiddle - React, Tailwind, and code Playground

by Owen Hartley

HTML

<canvas id="canvas" width="640" height="480"></canvas>

CSS

body {
	background: unset;
	margin: 0;
}
canvas {
	background-color: white;
	max-width: 100vmin;
	box-shadow: 0px 8px 16px #0000003f;
}

JavaScript

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

function test( x, y ) {
		var x2 = x - 320;
		var y2 = y - 240;
		var z = Math.sqrt( Math.pow( x2, 2 ) + Math.pow( y2, 2 ) ) + 800;
		return [ ( x2 / z ) * 1000 + 320, ( y2 / z ) * 1000 + 240 ];
}

console.log( test( 1, 1 ) );

ctx.fillStyle = "#000000";
for ( y = 0; y < 480; y++ ) {
	for ( x = 0; x < 640; x++ ) {
		var xy = test( x, y );
		var xy1 = test( x + 1, y + 1 );
		/*ctx.fillRect(
			xy[0],
			xy[1],
			1, 1
		);*/
		ctx.beginPath();
		ctx.moveTo( xy[0], xy[1] );
		ctx.lineTo( xy[0], xy1[1] );
		ctx.lineTo( xy1[0], xy1[1] );
		ctx.lineTo( xy1[0], xy[1] );
		ctx.closePath();
		ctx.fill();
	}
}