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

programming
1

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();