JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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;

   while (m <= (width + 1)) {
       var x = 0;
       var y = 0;
       var iteration = 0;
       var max_iteration = 255;
       var xtemp;
       var colour;

       while (x < 2 && 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;
       }
   }