JSFiddle - React, Tailwind, and code Playground

HTML

<p>Look at the pixel next to the play button and put your head perpendicular to it (so you're looking straight at it). Press play and find which direction the pixel is oscillating, either horizontal or vertical. If you can't tell move close. If you get it right a few times move back. When you've found the distance where you find the boundary record the distance below and enter your screen size.</p>
<button id="play">Play</button>
<canvas id="canvas" width="20" height="20">
    <h1>Canvas is not supported in this browser.</h1>
</canvas>
<span id="result"></span>
<h3>Distance in Inches:</h3>
Distance Inches:<input id="distance" type="text"></input>
<h3>Screen size (pixels):</h3>
Width:<input id="screenwidth" type="text"></input>
Height:<input id="screenheight" type="text"></input>
Diagonal Inches:<input id="screendiagonal" type="text"></input>
<button id="calculate">Calculate</button>
<span id="result2"></span>

JavaScript

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

var direction;

document.getElementById('play').addEventListener('click', function()
{
    document.getElementById('result').innerHTML = '';
    direction = Math.random() < 0.5 ? 'Horizontal' : 'Vertical';
    setTimeout(function()
    {
        document.getElementById('result').innerHTML = direction;
    }, 5000);
});

var oscillate = true;

setInterval(function()
{
    context.clearRect(0, 0, canvas.width, canvas.height);
	context.fillStyle = '#000';
    context.fillRect(10 + (direction == 'Horizontal' && oscillate ? 1 : 0), 10 + (direction == 'Vertical' && oscillate ? 1 : 0), 1, 1);
    oscillate = !oscillate; 
}, 1000);

document.getElementById('calculate').addEventListener('click', function()
{
    var distance = parseInt(document.getElementById('distance').value);
    var screenWidth = parseInt(document.getElementById('screenwidth').value);
    var screenHeight = parseInt(document.getElementById('screenheight').value);
    var screenDiagonal = parseInt(document.getElementById('screendiagonal').value);
    var result = (screenWidth / 2) / (180 / Math.PI * Math.atan((screenDiagonal / Math.sqrt(screenWidth * screenWidth + screenHeight * screenHeight)) * (screenWidth / 2) / distance));
    document.getElementById('result2').innerHTML = result.toFixed(1) + ' pixels per degree';
});