JSFiddle - React, Tailwind, and code Playground

HTML

<div style="text-align:center">
   <div id="time"></div>
   <canvas id="canvas" width="500" height="500"></canvas>
</div>

JavaScript

function Mandel() {
   var i=0;
   var j=0;
   var newColor=0;
   var u=0;
   var v=0;
   var x=0;
   var y=0;
   var z=0;
   for(i=0;i<=498;i++) {
      for(j=0;j<=498;j++) {
         x=-0.8+((3*i)/500);
         y=-1.4+((2.8*j)/500);
         newColor=0;
         u=0;
         v=0;
         do {
            z=u*u-v*v-x;
            v=(2*u*v)-y;
            u=z;
            newColor+=1;
         } while (!(((u*u+v*v)>9)||(newColor==14)));
         SetPixel(i+1,j+1,newColor);
      }
   }
};


var pixData;

var cColors = [[0,0,0x22],[0,0,0x33],[0,0,0x44],[0,0,0x55],[0,0,0x66],
               [0,0,0x77],[0,0,0x88],[0x10,0x10,0x99],[0x30,0x30,0xAA],
               [0x40,0x40,0xBB],[0x50,0x50,0xCC],[0x60,0x60,0xDD],
               [0x70,0x70,0xEE],[0x80,0x80,0xFF],[0x00,0x00,0x00]];
function SetPixel(x,y,c) {
  var p=(x+500*y)*4;
  pixData[p]=cColors[c][0];
  pixData[p+1]=cColors[c][1];
  pixData[p+2]=cColors[c][2];
  pixData[p+3]=255;
}

window.onload=function () {
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   var imageData = ctx.createImageData(500, 500);
   pixData = imageData.data;

   var t = new Date().getTime();

   Mandel();

   t = new Date().getTime()-t;

   document.getElementById("time").innerHTML=t+" ms";
   ctx.putImageData(imageData, 0, 0);
}