antonio-fr/index.html

## index.html
<html>
<head>
<title>Mandelbrot Render</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<LINK rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>
HTML5 Mandelbrot Set Render
</h1>
<h3>
Click on drawing to zoom in
</h3>
X : <input type="text" id="xcoord" value="-0.5"><br>
Y : <input type="text" id="ycoord" value="0"><br>
Zoom : <input type="text" id="zm" value="0.333"><button type="button" id="zmback" class="btn">Zoom Out</button><br><p></p>
<input type="checkbox" id="antialias" class="cbx"/>Antialiasing<input type="checkbox" id="fastrend" class="cbx"/>Fast Render<br>
<button type="button" id="rst"  class="btn">Reset</button>&nbsp;&nbsp;<button type="button" id="go"  class="btn">DRAW</button>
<p><div id="status"></div><div id="txttime"></div></p>
<canvas id="myCanvas" width="512" height="512">
Your browser does not support the HTML5 canvas tag. Please use latest Chrome, Firefox or Edge software.</canvas>
<p></p>
<button type="button" id="saveimg"  class="btn">Save Image</button>
<SCRIPT type="text/javascript" src="msr.js"></SCRIPT>
</body>
</html>

## msr.js
var x,y,z;
var canv = document.getElementById("myCanvas");
var ctx = canv.getContext("2d");
var passtart = 5; //16*16
document.getElementById("go").onclick = draw;
document.getElementById("rst").onclick = function rst(){
	document.getElementById('zm').value=0.333;
	document.getElementById('xcoord').value=-0.5;
	document.getElementById('ycoord').value=0;
	draw();
};
function draw(){
	z=parseFloat(document.getElementById('zm').value);
	x=parseFloat(document.getElementById('xcoord').value);
	y=parseFloat(document.getElementById('ycoord').value);
	ctx.clearRect(0, 0, canv.width, canv.height);
	t0 = performance.now();
	setTimeout(render, 10, x,y,z,passtart);
};
function render(ix,iy,z,n){
	document.getElementById("antialias").checked ? nstop = -1 : nstop = 0;
	document.getElementById("fastrend").checked ? nstop = 2 : null;
	info = document.getElementById('status');
	if (n<nstop){
		var t1 = performance.now();
		info.style.color = "black";
		info.innerHTML = "Done"
		document.getElementById("txttime").innerHTML = "[ "+(Math.round(t1-t0-10)/1000)+" s. ]";
		return;
	}
	document.getElementById("txttime").innerHTML =  null;
	info.style.color = "red";
	info.innerHTML = "Rendering - Wait ...";
	sq=Math.pow(2,n);
	ks = Math.max (60, Math.floor(Math.log(z))*100 );
	zr=z*512;
	if (ks>2500) ks=2500;
	if (document.getElementById("fastrend").checked && ks>1000) ks=1000;
	for(pi=0;pi<512;pi+=sq){
		for(pj=0;pj<512;pj+=sq){
			if((pi/sq)%2!=0 || (pj/sq)%2!=0 || n>=passtart){
				a=b=0, k=ks;
				i=ix+(pi-256)/zr;
				j=-iy+(pj-256)/zr;
				for(;k--&&Math.pow(a,2)+Math.pow(b,2)<3;c=Math.pow(a,2)-Math.pow(b,2)+i,b=2*a*b+j,a=c){};
				ctx.fillStyle = `hsl(${k*2},100%,50%)`;
				ctx.fillRect(pi,pj,sq,sq)
			}
		}
	}
	setTimeout(render, 50, x,y,z,n-1);
};
canv.addEventListener('click', function(event) {
	var xclick = event.offsetX,
		yclick = event.offsetY;
	zmbox = document.getElementById('zm');
	zmbox.value *= 4;
	document.getElementById('xcoord').value=(xclick-250)/(z*500)+x;
	document.getElementById('ycoord').value=(250-yclick)/(z*500)+y;
	draw();
}, false);
document.getElementById('antialias').onclick = function() {
	if ( this.checked )
		document.getElementById("fastrend").checked = false;
};
document.getElementById('fastrend').onclick = function() {
	if ( this.checked )
		document.getElementById("antialias").checked = false;
};
document.getElementById('zmback').onclick = function() {
	zmbox = document.getElementById('zm');
	zmbox.value /= 4;
	draw();
};
document.getElementById('saveimg').onclick = function() {
	var dataUrl = canv.toDataURL();
	var a = document.createElement('a');
	a.href = dataUrl;
	a.download = "img.png";
	document.body.appendChild(a);
	a.click();
};
window.onload = function()
{
	draw();
};

## style.css
body{
 font-family : arial;
 margin-bottom: 60px
}
div {
 display: inline
}
div#txttime{
 margin-left: 20px;
 font-size: 10px
}
body {
 background-color: #e6ebed
}
input{
 padding: 5px 12px 5px 12px;
 margin-bottom: 5px;
}
.btn {
  background: #94d4ff;
  background-image: -webkit-linear-gradient(top, #94d4ff, #ffffff);
  background-image: -moz-linear-gradient(top, #94d4ff, #ffffff);
  background-image: -ms-linear-gradient(top, #94d4ff, #ffffff);
  background-image: -o-linear-gradient(top, #94d4ff, #ffffff);
  background-image: linear-gradient(to bottom, #94d4ff, #ffffff);
  -webkit-border-radius: 6;
  -moz-border-radius: 6;
  border-radius: 6px;
  font-family: Arial;
  color: #000000;
  font-size: 16px;
  padding: 4px 20px 4px 20px;
  border: solid #616aa2 1.5px;
  text-decoration: none;
  margin-left : 10px;
}

.btn:hover {
  background: #78cbff;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
}
.cbx{
  margin : 0px 4px 20px 16px;
}
.cbx:hover{
  cursor: pointer;
  cursor: hand;
}
#myCanvas:hover{
  cursor: pointer;
  cursor: hand;
}
	<html>
	<head>
	<title>Mandelbrot Render</title>
	<meta name="viewport" content="width=device-width, initial-scale=0.7">
	<LINK rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<h1>
	HTML5 Mandelbrot Set Render
	</h1>
	<h3>
	Click on drawing to zoom in
	</h3>
	X : <input type="text" id="xcoord" value="-0.5"><br>
	Y : <input type="text" id="ycoord" value="0"><br>
	Zoom : <input type="text" id="zm" value="0.333"><button type="button" id="zmback" class="btn">Zoom Out</button><br><p></p>
	<input type="checkbox" id="antialias" class="cbx"/>Antialiasing<input type="checkbox" id="fastrend" class="cbx"/>Fast Render<br>
	<button type="button" id="rst" class="btn">Reset</button>  <button type="button" id="go" class="btn">DRAW</button>
	<p><div id="status"></div><div id="txttime"></div></p>
	<canvas id="myCanvas" width="512" height="512">
	Your browser does not support the HTML5 canvas tag. Please use latest Chrome, Firefox or Edge software.</canvas>
	<p></p>
	<button type="button" id="saveimg" class="btn">Save Image</button>
	<SCRIPT type="text/javascript" src="msr.js"></SCRIPT>
	</body>
	</html>
	var x,y,z;
	var canv = document.getElementById("myCanvas");
	var ctx = canv.getContext("2d");
	var passtart = 5; //16*16
	document.getElementById("go").onclick = draw;
	document.getElementById("rst").onclick = function rst(){
	document.getElementById('zm').value=0.333;
	document.getElementById('xcoord').value=-0.5;
	document.getElementById('ycoord').value=0;
	draw();
	};
	function draw(){
	z=parseFloat(document.getElementById('zm').value);
	x=parseFloat(document.getElementById('xcoord').value);
	y=parseFloat(document.getElementById('ycoord').value);
	ctx.clearRect(0, 0, canv.width, canv.height);
	t0 = performance.now();
	setTimeout(render, 10, x,y,z,passtart);
	};
	function render(ix,iy,z,n){
	document.getElementById("antialias").checked ? nstop = -1 : nstop = 0;
	document.getElementById("fastrend").checked ? nstop = 2 : null;
	info = document.getElementById('status');
	if (n<nstop){
	var t1 = performance.now();
	info.style.color = "black";
	info.innerHTML = "Done"
	document.getElementById("txttime").innerHTML = "[ "+(Math.round(t1-t0-10)/1000)+" s. ]";
	return;
	}
	document.getElementById("txttime").innerHTML = null;
	info.style.color = "red";
	info.innerHTML = "Rendering - Wait ...";
	sq=Math.pow(2,n);
	ks = Math.max (60, Math.floor(Math.log(z))*100 );
	zr=z*512;
	if (ks>2500) ks=2500;
	if (document.getElementById("fastrend").checked && ks>1000) ks=1000;
	for(pi=0;pi<512;pi+=sq){
	for(pj=0;pj<512;pj+=sq){
	if((pi/sq)%2!=0 \|\| (pj/sq)%2!=0 \|\| n>=passtart){
	a=b=0, k=ks;
	i=ix+(pi-256)/zr;
	j=-iy+(pj-256)/zr;
	for(;k--&&Math.pow(a,2)+Math.pow(b,2)<3;c=Math.pow(a,2)-Math.pow(b,2)+i,b=2ab+j,a=c){};
	ctx.fillStyle = `hsl(${k*2},100%,50%)`;
	ctx.fillRect(pi,pj,sq,sq)
	}
	}
	}
	setTimeout(render, 50, x,y,z,n-1);
	};
	canv.addEventListener('click', function(event) {
	var xclick = event.offsetX,
	yclick = event.offsetY;
	zmbox = document.getElementById('zm');
	zmbox.value *= 4;
	document.getElementById('xcoord').value=(xclick-250)/(z*500)+x;
	document.getElementById('ycoord').value=(250-yclick)/(z*500)+y;
	draw();
	}, false);
	document.getElementById('antialias').onclick = function() {
	if ( this.checked )
	document.getElementById("fastrend").checked = false;
	};
	document.getElementById('fastrend').onclick = function() {
	if ( this.checked )
	document.getElementById("antialias").checked = false;
	};
	document.getElementById('zmback').onclick = function() {
	zmbox = document.getElementById('zm');
	zmbox.value /= 4;
	draw();
	};
	document.getElementById('saveimg').onclick = function() {
	var dataUrl = canv.toDataURL();
	var a = document.createElement('a');
	a.href = dataUrl;
	a.download = "img.png";
	document.body.appendChild(a);
	a.click();
	};
	window.onload = function()
	{
	draw();
	};
	body{
	font-family : arial;
	margin-bottom: 60px
	}
	div {
	display: inline
	}
	div#txttime{
	margin-left: 20px;
	font-size: 10px
	}
	body {
	background-color: #e6ebed
	}
	input{
	padding: 5px 12px 5px 12px;
	margin-bottom: 5px;
	}
	.btn {
	background: #94d4ff;
	background-image: -webkit-linear-gradient(top, #94d4ff, #ffffff);
	background-image: -moz-linear-gradient(top, #94d4ff, #ffffff);
	background-image: -ms-linear-gradient(top, #94d4ff, #ffffff);
	background-image: -o-linear-gradient(top, #94d4ff, #ffffff);
	background-image: linear-gradient(to bottom, #94d4ff, #ffffff);
	-webkit-border-radius: 6;
	-moz-border-radius: 6;
	border-radius: 6px;
	font-family: Arial;
	color: #000000;
	font-size: 16px;
	padding: 4px 20px 4px 20px;
	border: solid #616aa2 1.5px;
	text-decoration: none;
	margin-left : 10px;
	}

	.btn:hover {
	background: #78cbff;
	text-decoration: none;
	cursor: pointer;
	cursor: hand;
	}
	.cbx{
	margin : 0px 4px 20px 16px;
	}
	.cbx:hover{
	cursor: pointer;
	cursor: hand;
	}
	#myCanvas:hover{
	cursor: pointer;
	cursor: hand;
	}