Display an Analog Clock with JavaScript｜Lightweight Canvas‑Based Clock UI (Copy & Paste Ready)

Display an Analog Clock with JavaScript｜Lightweight Canvas‑Based Clock UI (Copy & Paste Ready)

This guide explains how to display an analog clock on a webpage using JavaScript and Canvas, complete with practical copy‑and‑paste‑ready code.
It smoothly draws the hour, minute, and second hands, and even renders a numbered clock face. You can easily integrate this lightweight and fully functional clock UI into your site.

<canvas id="clock" style="width:200px;height:200px;"></canvas>

<script>
function TAnalogClock(clockCanvas){
  this.can=clockCanvas;
  this.size=200;
  this.can.setAttribute("width",this.size+"px");
  this.can.setAttribute("height",this.size+"px");
  this.ctx=this.can.getContext("2d", {willReadFrequently:true});
  this.ctx.scale(1,1);
  this.ctx.lineCap='round';
  this.draw=function(){
    // Get the current hour, minute, and second
    let nowTime=new Date();
    let hour=nowTime.getHours();
    let minute=nowTime.getMinutes();
    let second=nowTime.getSeconds()+nowTime.getMilliseconds()/1000;

    // Clear the canvas
    this.ctx.clearRect(0,0,this.size,this.size);

    let r=this.size/2;

    // Draw the outer circle
    this.ctx.beginPath();
    this.ctx.strokeStyle="rgb(0,0,0)";
    this.ctx.lineWidth=r/20;
    this.ctx.arc(r,r,r*0.9,0,Math.PI*2,false);
    this.ctx.stroke();

    // Draw tick marks every 5 minutes
    for(i=0;i<60;i+=5){
      this.ctx.beginPath();
      this.ctx.strokeStyle="rgb(0,0,0)";
      this.ctx.lineWidth=r/24;
      this.ctx.moveTo(r+Math.cos(i/30*Math.PI)*r*0.90, r+Math.sin(i/30*Math.PI)*r*0.90);
      this.ctx.lineTo(r+Math.cos(i/30*Math.PI)*r*0.85, r+Math.sin(i/30*Math.PI)*r*0.85);
      this.ctx.stroke();
    }

    // Set font fill color (red)
    this.ctx.fillStyle="rgb(255,0,0)";
    // Set font style
    this.ctx.font='normal '+r/6+'px Verdana,Roboto,"Droid Sans","游ゴシック",YuGothic,"メイリオ",Meiryo,'+
             '"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック",sans-serif';
    this.ctx.textBaseline="middle";
    this.ctx.textAlign="center";

    for(i=0;i<4;i++){
      // Coordinate transformation
      this.ctx.translate(
        r+Math.cos(0.5*i*Math.PI)*r*0.76,
        r+Math.sin(0.5*i*Math.PI)*r*0.76
      );
      // Fill the text path
      this.ctx.fillText((i+1)*3, 0, 0);
      // Reset transform
      this.ctx.resetTransform();
    }

    // Hour hand
    this.ctx.beginPath();
    this.ctx.strokeStyle="rgb(0,0,0)";
    this.ctx.lineWidth=r/8;
    this.ctx.moveTo(r,r);
    this.ctx.lineTo(
      r+Math.cos((hour+minute/60)/6*Math.PI-Math.PI/2)*r*0.50,
      r+Math.sin((hour+minute/60)/6*Math.PI-Math.PI/2)*r*0.50
    );
    this.ctx.stroke();

    // Minute hand
    this.ctx.beginPath();
    this.ctx.strokeStyle="rgb(80,80,80)";
    this.ctx.lineWidth=r/12;
    this.ctx.moveTo(r,r);
    this.ctx.lineTo(
      r+Math.cos((minute+second/60)/30*Math.PI-Math.PI/2)*r*0.65,
      r+Math.sin((minute+second/60)/30*Math.PI-Math.PI/2)*r*0.65
    );
    this.ctx.stroke();

    // Second hand
    this.ctx.beginPath();
    this.ctx.strokeStyle="rgb(140,140,140)";
    this.ctx.lineWidth=r/20;
    this.ctx.moveTo(r,r);
    this.ctx.lineTo(
      r+Math.cos(second/30*Math.PI-Math.PI/2)*r*0.75,
      r+Math.sin(second/30*Math.PI-Math.PI/2)*r*0.75
    );
    this.ctx.stroke();
  }
  setInterval(this.draw.bind(this),50);
}

window.addEventListener("DOMContentLoaded",function(){
  // Specify the canvas on which the analog clock will be drawn
  AnalogClock=new TAnalogClock(document.querySelector("#clock"));
});
</script>