Untitled

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">

<title>HTML5 Canvas</title>

<script type="text/javascript">

window.addEventListener("load", canvasApp, false);

function canvasApp() {

	//The whole program should be placed inside this canvasApp function. This function executes only when the page is fully loaded.

	//code below sets up variables so that the canvas context can be referenced in JavaScript.
	var displayCanvas = document.getElementById("displayCanvas");
	var context = displayCanvas.getContext("2d");
	var displayWidth = displayCanvas.width;
	var displayHeight = displayCanvas.height;
	var Xmin;
	var Xmax;
	var Ymin;
	var Ymax;
	var maxIterations;

	init();

	function init() {
		Xmin = -2;
		Xmax = 2;
		Ymin = -2
		Ymax = 2;
		maxIterations = 2000;
		fillCanvas();
	}

	function fillCanvas() {
		var image = context.getImageData(0, 0, displayWidth, displayHeight);
		var pixelData = image.data;
		var len = pixelData.length;
		var i;
		var x, y;
		var a, b;
		var pixX, pixY, temp;
		var iterations;
		var maxIterations = 2000;
		var red, green ,blue;
		var dx, dy;
		var rad;
		var maxRad = Math.sqrt(displayWidth*displayWidth + displayHeight*displayHeight)/2;
		var grays = [64, 128, 192, 255];
		var gray;
		var escaped;
		for (i = 0; i < len; i = i + 4) {
			pixX = (i/4 % displayWidth);
			pixY = Math.floor(i/(4*displayWidth));

			// figure out what x and y are represented by this pixX, pixY
			a = Xmin + ((Xmax-Xmin)/displayWidth)*pixX
			b = Ymin + ((Ymax-Ymin)/displayHeight)*pixY
			// start the Mandelbrot iteration to decide what color this pixel should be
			// most code here
			x = 0;
			y = 0;
			iterations = 0;
			escaped = false;
			while (true){
				temp = (x*x) - (y*y) + a;
				y = 2*x*y + b;
				x = temp;
				iterations++;
				if (iterations > maxIterations){
					break;
				}
				if ((x*x) + (y*y) > 4){
					red = green = blue = 255;
					escaped = true;
					break;
				}
			}
			if (escaped) {
				gray = grays[iterations % 4];
			}
			else {
				gray = 0;
			}
			// color the pixel the correct color

			pixelData[i  ] = gray; //red  CHANGE THIS
			pixelData[i+1] = gray; //green  CHANGE THIS
			pixelData[i+2] = gray; //blue  CHANGE THIS
			pixelData[i+3] = 255; //alpha
		}
		context.putImageData(image,0,0);
	}

	function changeXmin() {
		Xmin = document.getElementById("Xmin").value;
		location.reload();

	}
	function changeXmax() {
		Xmax = document.getElementById("Xmax").value;
		location.reload();

	}
	function changeYmin() {
		Ymin = document.getElementById("Ymin").value;
		location.reload();

	}
	function changeYmax() {
		Ymax = document.getElementById("Ymax").value;
		location.reload();

	}
	function changeIterations() {
		maxIterations = document.getElementById("Iterations").value;
		location.reload();

	}

}

</script>

<title>HTML5 Canvas Example</title>

<style type="text/css">
	body {background-color:#ffffff; color:#333333;}
	a {font-family: sans-serif; color:#d15423; text-decoration:none;}
	/*#displayCanvas {position:absolute; top:10px; z-index:0;border: 1px solid #000;}*/
	/*#container {width:820px; height:820px; margin:auto;}*/
</style>

</head>
<body>
	<div id="container">
   		<canvas id="displayCanvas" width="1000px" height="1000px"></canvas>
	</div>
	<div id="xmin">
		<input type="number" placeholder="X Min" id="Xmin" oninput="changeXmin()">
	</div>
	<div id="xmax">
		<input type="number" placeholder="X Max" id="Xmax" oninput="changeXmax()">
	</div>
	<div id="ymin">
		<input type="number" placeholder="Y Min" id="Ymin" oninput="changeYmin()">
	</div>
	<div id="ymax">
		<input type="number" placeholder="Y Max" id="Ymax" oninput="changeYmax()">
	</div>
	<div id="iterations">
		<input type="number" placeholder="Iterations" id="Iterations" oninput="changeIterations()">
	</div>
</body>
</html>