rainbowMazeGenerator.html

<!DOCTYPE html>

<html>

<head>

	<title>Rainbow Maze Generator</title>

	<style>
		body {
			margin : 0px;
			overflow: hidden;
			background-color: black;
			color: white;
		}
		#canvas {
			
		}
		#options {
			display: inline-block;
			vertical-align:top;
		}
		input {
			display: block;
		}
	</style>

</head>

<body>

	<canvas id="canvas"></canvas>
	<div id="options">
		<input type="range" id="saturation" min="0" max="100" value="100" step="5" /><span>Saturation</span>
		<input type="range" id="lightness" min="0" max="100" value="50" step="5" /><span>Lightness</span>
	</div>

	<script type="text/javascript" src="./rainbowMazeGenerator.js"></script>
	
	<script>
		var resize;
		window.addEventListener("resize", resize = function() {
			canvas.style.width = Math.min(window.innerWidth, window.innerHeight) + "px";
			canvas.style.height = canvas.style.width;
		});
		resize();
	</script>

</body>

</html>