Clock hand angle math explained using JavaScript and HTML5 Part 2

Visual Learner ? No problem Watch video tutorial instead

Clock hand angle math explained using JavaScript and HTML5 Part 2

By: Othman Kimweri
Date: 25/05/2020
Time To Read: 14 minutes

Pre-requisites

Basic HTML5 knowledge
Basic JavaScript Knowledge
Clock hand angle math explained using JavaScript and HTML5 Part 1

Introduction

This is a continuation and final part of the tutorial on how to draw a clock using JavaScript and HTML5 Canvas. In this particular tutorial we shall write the JavaScript code to render the clock in the browser. As usual all homework is optional but doing it will help reinforce the concept.

Setting up the HTML document

Somewhere in your HTML document add a canvas element and give it a reasonable width and height and some basic styling

<canvas id="clock" width="200" height="200" 
    style="background-color:#000;">
<canvas>

Setting up the script

Next up we need to set up the basic structure for our script by defining some variables for our program namely; the canvas, and center of the clock


//Get a reference to the canvas

var canvas = document.getElementById('clock');

// Get a reference to the 2d drawing context
// A 2d context is an object which  given the right
// parameters e.g font and color can be used to draw 
// on the canvas in 2d

var context = canvas.getContext('2d');
 
// What is the radius of our clock ?

var radius = 70;

// Center of the clock should be in 
// the middle of the canvas

var centerX = canvas.width / 2;
var centerY = canvas.height / 2

//Now draw the clock
//We need to redraw the clock every second
//so call inside setInterval

setInterval(drawClock,1000);

The function drawClock() will be defined systematically using 4 other functions as shown in the code snippet below

    function drawClock()
    {
        drawFace();
        drawTickMarks();
        drawNumbers();
        drawTime();
    }

[Back to top]

Drawing the clock face

function drawFace()
{
    //face
    context.fillStyle = "white";
    context.beginPath();
    context.arc(centerX,centerY,radius,0,2*Math.PI);
    context.fill();

    //centre circle
    context.fillStyle = "black";
    context.beginPath();
    context.arc(centerX,centerY,5,0,2*Math.PI);
    context.fill();

    //brand the clock
    context.font = '18px serif';
    context.fillStyle = 'black';
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillText("My",centerX,centerY - 30);
    context.fillText("Clock",centerX,centerY + 30);
 }

[Back to top]

Drawing the tick marks

function drawTickMarks()
{
   var angle;
   for(var j = 1; j <= 60;j++)
   {
       angle = j * Math.PI / 30;

       context.save();
       context.translate(centerX,centerY); //new 0,0
       context.rotate(angle); //counter clockwise

       //Main tickmarks  should be longer and thicker
       if(j % 5 === 0)
       {
         context.lineWidth = 0.02*radius;
         context.moveTo(0,-radius + 5);
         context.lineTo(0,-radius);
         context.stroke();					 	
       }
       else{		 	
        context.lineWidth = 0.01*radius;
        context.moveTo(0,-radius + 2);
        context.lineTo(0,-radius);
        context.stroke;
        }
					
       context.restore();
  }
}

[Back to top]

Drawing the numbers

function drawNumbers()
{
   var angle;

   for(var i = 1; i < 13 ;i++)
   {
     angle = i * Math.PI / 6;
     context.save();
     context.translate(centerX,centerY); //new 0,0
     context.rotate(angle); //counter clockwise

     //Move context to number draw position and unrotate
     context.translate(0,-radius*0.85);
     context.rotate(-angle); //unrotate
     context.fillText(i,0,0);
     context.restore();
    }
}

[Back to top]

Drawing the time

function drawTime() {
    //What time is it ?
    var now = new Date();
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();

    //posHourHand = hourhand offset + minute offset + second offset
    var posHourHand = h % 12 * Math.PI / 6 + m * Math.PI / (6 * 60) + s * Math.PI / (6 * 60 * 60);

    //minutehand offset + secondhand offset
    var posminuteHand = m * Math.PI / 30 + Math.PI / (30 * 60);

    //secondHand = secondhand offset
    var possecondHand = s * Math.PI / 30;

    //Hour hand
    context.save();
    context.lineWidth = 0.07 * radius;
    context.lineCap = 'round';
    context.translate(centerX, centerY);
    context.beginPath();
    context.moveTo(0, 0);
    context.rotate(posHourHand);
    context.lineTo(0, -0.5 * radius);
    context.stroke();
    context.rotate(-posHourHand); //unrotate
    context.restore();

    //Minute hand
    context.save();
    context.translate(centerX, centerY);
    context.lineWidth = 0.07 * radius;
    context.lineCap = 'round';
    context.beginPath();
    context.moveTo(0, 0);
    context.rotate(posminuteHand);
    context.lineTo(0, -0.8 * radius);
    context.stroke();
    context.rotate(-posminuteHand);
    context.restore();

    //Second hand
    context.save();
    context.lineWidth = 0.02 * radius;
    context.lineCap = 'round';
    context.translate(centerX, centerY);
    context.beginPath();
    context.moveTo(0, 0);
    context.rotate(possecondHand);
    context.lineTo(0, -0.9 * radius);
    context.stroke();
    context.rotate(-possecondHand);
    context.restore();
}