HTML5 Mandelbrot

HTML

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

$(document).ready(function() {
    let d_canvas = document.getElementById('canvas');
    let ctx = d_canvas.getContext('2d');
   	
    let imageSize = d_canvas.getAttribute('width')
    let dimension = 3;
    let scale = imageSize / dimension;
    
    for(let x = 0; x < imageSize; x++) {
    	for(let y = 0; y < imageSize; y++) {
        let c = mandelbrot(x/scale-dimension/2, y/scale-dimension/2);
        
        ctx.fillStyle = `rgba(${c},${c},${c},1)`
			  ctx.fillRect( x, y, 1, 1 );
      }
    }
});


function abs(re, im) {
	return Math.sqrt(re**2 + im**2);
}

function mandelbrot(re, im) {
  const maxIterations = 255;
	let	i = 0;
  
  let x = re;
  let y = im;
  while(i < maxIterations && abs(x, y) < 2) {
    let x2 = x**2 - y**2 + re;
    let y2 = 2 * x * y + im;
    
    x = x2;
    y = y2;
    
    i++;
  }
  
  return i;
}