JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="pump-discharge" width="200" height="200" style="border:solid 1px black;"></canvas>

JavaScript

var i = 1;       
    clock();
    var x = 0;
      
      
     var interval = setInterval(function() {
          //console.log(x);
       clock();
         x++;
         if (x > 90) clearInterval(interval);
     }, 30);
      
          
    function clock(){  
    console.log('clock');
      var ctx = document.getElementById('pump-discharge').getContext('2d');  
      ctx.save();  
      ctx.clearRect(0,0,150,150);  // clears rectangle after each move
      ctx.translate(75,75);  //Moves clock in the middle of the screen
      ctx.scale(0.4,0.4);   // Changes Scale
     // ctx.rotate(-Math.PI/2);  
      
      i++;
      
   
      ctx.save();  
      ctx.rotate((Math.PI/180) * i); // last number is degrees  
      ctx.strokeStyle = "#D40000";  
      ctx.fillStyle = "#D40000";  
      ctx.lineWidth = 6;  
      ctx.beginPath();  
      ctx.moveTo(-30,0);  
      ctx.lineTo(83,0);  
      ctx.stroke();  
       
      ctx.fillStyle = "#555";  
      ctx.arc(0,0,3,0,Math.PI*2,true);  
      ctx.fill();  
      ctx.restore();  
      ctx.restore();  
    }