JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='myCanvasElt' width="800" height="800"></canvas>
<div style="color:grey;">Use the arrow keys to pan and spacebar to zoom.</div>

JavaScript

$(function(){
  var xAdd = 0;
  var yAdd = 0;
  var zoom = 1.0;
  window.onkeyup = keyUp;
        
  function keyUp(e) {
      switch(e.keyCode) {
          case 38: yAdd -= zoom; go(); break;
          case 40: yAdd += zoom; go(); break;
          case 37: xAdd -= zoom; go(); break;
          case 39: xAdd += zoom; go(); break;
          case 32: zoom *= 0.5; go(); break;
          default: console.log(e.keyCode); break;
      }
  }
        
                
  function go() {
      var canvas = document.getElementById('myCanvasElt');
      var ctx = canvas.getContext('2d');
      var canvasData = ctx.createImageData(canvas.width, canvas.height);
            
      function computeColor(x, y) {
          x = 4*zoom * (x/canvas.width) - (2*zoom) + xAdd; // -2 to +2
          y = 4*zoom * (y/canvas.height) - (2*zoom) + yAdd;

          var iteration = 0;
          var max_iteration = 250;
          var zX = x;
          var zY = y;
                
          while ( x*x+y*y <= 4 && iteration < max_iteration) {                                                           
              tempx = Math.abs(x*x-y*y);  // (a,b)(c,d) = (ac - bd, bc + ad)
              y = x*y*2 + zX;  // Rotation
              x = tempx + zY;
              iteration++;
          }
               
          return Math.round(255 * iteration / max_iteration);
      }
 
      for (var x = 0; x < canvasData.width; x++) {
          for (var y = 0; y < canvasData.height; y++) {
              var color = computeColor(x, y);
              var idx = (x + y * canvas.width) * 4;
              canvasData.data[idx + 0] = color;
              canvasData.data[idx + 1] = color;
              canvasData.data[idx + 2] = color;
              canvasData.data[idx + 3] = 255;
          }
      }
      ctx.putImageData(canvasData, 0, 0);
  } 
    
  go();
});