# Create an Analog Clock Using the Canvas? Can't Get Code To Work??

**URL:** https://forum.kirupa.com/t/create-an-analog-clock-using-the-canvas-cant-get-code-to-work/439572
**Category:** programming
**Created:** [December 19, 2014, 6:51am UTC](https://forum.kirupa.com/t/create-an-analog-clock-using-the-canvas-cant-get-code-to-work/439572 "2014-12-19T06:51:10Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Michael\_Reisman](https://avatars.discourse-cdn.com/v4/letter/m/e9c0ed/32.png) [@Michael\_Reisman](https://forum.kirupa.com/u/Michael_Reisman)
#### Post date: [December 19, 2014, 6:51am UTC](https://forum.kirupa.com/t/create-an-analog-clock-using-the-canvas-cant-get-code-to-work/439572/1 "2014-12-19T06:51:11Z")

</div>

Hello Forum!

I am following the “Create an Analog Clock Using the Canvas” tutorial  
on Kirupa’s website and I can’t seem to get past one step. Would the forum be  
willing to give me some advice?

Everything is fine until I get to the section, “Warning: Math Ahead!”.  
When I cut and paste the math code into my editor under where the  
comments say “put math here later” and then replace two lines in the  
code under where the code draws the red line where the tutorial says the code  
goes, my canvas goes blank! I’ve tried everything I could think of, but  
I can’t seem to fix this. I am a beginning JavaScript programmer, but  
understand all that it takes is one character in the wrong place and then  
my code won’t work!

Here is my code that isn’t working. I have left in the digital clock as  
the tutorial recommended I would need it as I code the analog clock.

Thank you,

Michael Reisman

Code:

document.addEventListener(‘DOMContentLoaded’, displayTime);

```
function displayTime() {
    var now = new Date();
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();

        var timeString = formatHour(h) + ":" + padZero(m) + ":" + padZero(s) + " " + getTimePeriod(h);
        document.querySelector("#current-time").innerHTML = timeString;

```

}

function padZero(num) {  
if (num \< 10) {  
return “0” + String(num);  
}  
else {  
return String(num);  
}  
}

function formatHour(h) {  
var hour = h % 12;

```
if (hour == 0) {
    hour = 12;
}

return String(hour)

```

}

function getTimePeriod(h) {  
return (h \< 12) ? “AM” : “PM”;  
}

// — Analog clock —//  
var canvas = document.querySelector("#clock");  
var context = canvas.getContext(“2d”);

```
// You can change this to make the clock as big or small as you want.
// Just remember to adjust the canvas size if necessary.
var clockRadius = 100;

// Make sure the clock is centered in the canvas
var clockX = canvas.width / 2;
var clockY = canvas.height / 2;

// <-- Put math here later

// Make sure TAU is defined (it's not by default)
Math.TAU = 2 * Math.PI;

var hArmRadians = Math.TAU * (h / 12);
var hArmLength = clockRadius;

// If we start from the center of the clock,
// this is where the x and y value the other end of the arm should point to
var targetX = clockX + Math.cos(hArmRadians - (Math.TAU/4)) * hArmLength;
var targetY = clockY + Math.sin(hArmRadians - (Math.TAU/4)) * hArmLength;

// The line should be 10 pixels thick, and red
context.lineWidth = 10;
context.strokeStyle = '#DD0000';

context.beginPath();
context.moveTo(clockX, clockY); // Start at the center
context.lineTo(targetX, targetY); // Draw a line outwards
context.stroke();

// The line should be 5 pixels thick, and black
context.lineWidth = 5;
context.strokeStyle = '#000000';

context.beginPath();
context.moveTo(clockX, clockY); // Start at the center
context.lineTo(clockX, clockY - clockRadius); // Draw a line upwards
context.stroke();
```