sporsh/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Astigmatism eye test</title>
    <style>
        canvas {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: black;
        }
    </style>

    <script>
     var angle = 0;
        var radius = 20;
        var tile, tileCtx, ctx;

        onload = function() {
          tile = document.createElement('canvas');
          tileCtx = tile.getContext('2d');
          ctx = canvas.getContext('2d');
          draw();
        };


        function draw() {
          tile.width = tile.height = radius * 2;
          tileCtx.strokeStyle = '#fff';
          tileCtx.lineWidth = Math.max(1, radius / 6);
          tileCtx.translate(radius, radius);
          tileCtx.rotate(angle / 180 * Math.PI);

          tileCtx.beginPath();
          tileCtx.moveTo(-radius / 2, 0);
          tileCtx.lineTo(radius / 2, 0);
          tileCtx.stroke();

          var pattern = ctx.createPattern(tile, 'repeat');
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
          ctx.save();
          var offsetX = canvas.width / 2 + tile.width / 2;
          var offsetY = canvas.height / 2 + tile.height / 2;
          ctx.translate(offsetX, offsetY);
          ctx.fillStyle = pattern;
          ctx.fillRect(-offsetX, -offsetY, canvas.width, canvas.height);
          ctx.restore();
          ctx.fillStyle = '#888';
          ctx.font = "700 20px courier";
          ctx.fillText("axis: " + (0 | (angle + 90) % 180) + "\u00B0", 10, 30);
        }

        onmousemove = function(event) {
          angle = event.offsetX / window.innerWidth * 180 * 2;
          draw();
        };

        onkeyup = function(event) {
          switch (event.keyIdentifier) {
            case "Up":
            case "U+004B":
              radius *= 1.5;
              break;
            case "Down":
            case "U+004D":
              radius /= 1.5;
              break;
            case "Left":
              angle -= 1;
              angle |= 0;
              break;
            case "Right":
              angle += 1;
              angle |= 0;
              break;
            default:
          }
          draw();
        };
    </script>
</head>

<body>
    <canvas id="canvas" />
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Astigmatism eye test</title>
	<style>
	canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	}
	</style>

	<script>
	var angle = 0;
	var radius = 20;
	var tile, tileCtx, ctx;

	onload = function() {
	tile = document.createElement('canvas');
	tileCtx = tile.getContext('2d');
	ctx = canvas.getContext('2d');
	draw();
	};


	function draw() {
	tile.width = tile.height = radius * 2;
	tileCtx.strokeStyle = '#fff';
	tileCtx.lineWidth = Math.max(1, radius / 6);
	tileCtx.translate(radius, radius);
	tileCtx.rotate(angle / 180 * Math.PI);

	tileCtx.beginPath();
	tileCtx.moveTo(-radius / 2, 0);
	tileCtx.lineTo(radius / 2, 0);
	tileCtx.stroke();

	var pattern = ctx.createPattern(tile, 'repeat');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	ctx.save();
	var offsetX = canvas.width / 2 + tile.width / 2;
	var offsetY = canvas.height / 2 + tile.height / 2;
	ctx.translate(offsetX, offsetY);
	ctx.fillStyle = pattern;
	ctx.fillRect(-offsetX, -offsetY, canvas.width, canvas.height);
	ctx.restore();
	ctx.fillStyle = '#888';
	ctx.font = "700 20px courier";
	ctx.fillText("axis: " + (0 \| (angle + 90) % 180) + "\u00B0", 10, 30);
	}

	onmousemove = function(event) {
	angle = event.offsetX / window.innerWidth * 180 * 2;
	draw();
	};

	onkeyup = function(event) {
	switch (event.keyIdentifier) {
	case "Up":
	case "U+004B":
	radius *= 1.5;
	break;
	case "Down":
	case "U+004D":
	radius /= 1.5;
	break;
	case "Left":
	angle -= 1;
	angle \|= 0;
	break;
	case "Right":
	angle += 1;
	angle \|= 0;
	break;
	default:
	}
	draw();
	};
	</script>
	</head>

	<body>
	<canvas id="canvas" />
	</body>

	</html>