JSFiddle - React, Tailwind, and code Playground

HTML

<body>
 <canvas id="set_space" width="525" height="300" style="border:1px solid #000000;">
 </canvas>
</body>

JavaScript

interval = window.setInterval(main_loop, 5);


var c = document.getElementById("set_space");
var ctx = c.getContext("2d");
var width = c.width;
var height = c.height;
var width_increment = 3.5/width;
var height_increment = 2/height;

var xcord = -2.5;
var ycord = 1;
var m=0;
var n=0;
		
function main_loop() {
	if (m<=(width+1)) {
		var x=0;
		var y=0;
		var iteration = 0;
		var max_iteration = 255;
		var xtemp;
		var colour;
		
		while (x*x < 2 && y*y < 2 && iteration < max_iteration) {
			xtemp = (x*x) - (y*y) + xcord;
			y=(2*x*y)+ycord;
			x=xtemp;
			iteration = iteration + 1;
		}
		
		if (iteration === max_iteration) {
			colour = "rgb(0,0,0)";
		}
		
		else {
			colour = "rgb("+ (iteration) +","+ (iteration) +",255)";
		}
		
		ctx.fillStyle = colour;
		ctx.fillRect(m, n, 1, 1);

		ycord = ycord - height_increment;
		n=n+1;
		
		if (n===height) {
			xcord = xcord + width_increment;
			ycord = 1;
			m=m+1;
			n=0;
		}
	}	
}