JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<canvas id="clock_hand_hh"></canvas>

JavaScript

function clock_hand_hh(hh) {
  var hh_canvas = document.getElementById('clock_hand_hh');
  var hh_context = hh_canvas.getContext('2d');
  hh_canvas.width = 500;
  hh_canvas.height = 500;
  var centerX = hh_canvas.width / 2;
  var centerY = hh_canvas.height / 2;
  var radius = 10;

    
  hh_context.translate(centerX, centerY);
  hh_context.rotate=((hh / 12) * 2 * Math.PI);
    
    
  hh_context.beginPath();
  hh_context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  hh_context.fillStyle = '#000000';
  hh_context.fill();
  hh_context.lineWidth = 5;
  hh_context.strokeStyle = '#000000';
  hh_context.stroke();

  hh_context.beginPath();
  hh_context.bezierCurveTo(centerX, centerY, centerX - 10, centerY - 50, centerX, centerY - 100);
  hh_context.bezierCurveTo(centerX, centerY - 100, centerX + 10, centerY - 50, centerX, centerY);
  hh_context.fillStyle = '#000000';
  hh_context.fill();
  hh_context.lineWidth = 2;
  hh_context.strokeStyle = '#000000';
  hh_context.stroke();

  if (hh > 12) {
    hh = hh - 12;
  }
  //alert((hh / 12) * 2 * Math.PI);
    console.log((hh ))

}
clock_hand_hh(90)