Question

I’m looking into this clock. I have no experience with the js that comes with this file.

Here is the demo

Here is all the code

How can I edit the face of the clock?

I’m looking at this and I would like more control over what the hands look like. Can someone tell me what makes them come to a point. How could I make them just a thick line?

 // draw hour
ctx.save();
var theta = (hour - 3) * 2 * Math.PI / 12;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -5);
ctx.lineTo(-15, 5);
ctx.lineTo(clockRadius * 0.5, 1);
ctx.lineTo(clockRadius * 0.5, -1);
ctx.fill();
ctx.restore();

// draw minute
ctx.save();
var theta = (minute - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -4);
ctx.lineTo(-15, 4);
ctx.lineTo(clockRadius * 0.8, 1);
ctx.lineTo(clockRadius * 0.8, -1);
ctx.fill();
ctx.restore();

// draw second
ctx.save();
var theta = (seconds - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -3);
ctx.lineTo(-15, 3);
ctx.lineTo(clockRadius * 0.9, 1);
ctx.lineTo(clockRadius * 0.9, -1);
ctx.fillStyle = '#0f0';
ctx.fill();
ctx.restore();

ctx.restore();
}

Thanks!

Answer 1

Look at what each of the calls to ctx do to make the hand:

ctx.rotate(theta);   // Rotates the canvas according to the hand position.
ctx.beginPath();     // Start drawing a path.
ctx.moveTo(-15, -4); // Set the "brush"/"pen" at center left corner.
ctx.lineTo(-15, 4);  // Draw a line to position center right corner.
ctx.lineTo(clockRadius * 0.8, 1);  // Draw a line to the edge, right corner.
ctx.lineTo(clockRadius * 0.8, -1); // Draw a line to the edge, left corner.
ctx.fill();          // Fill the polygon we just drew.
ctx.restore();       // Rotate the canvas back.

So, for example, changing the 1 and -1 values to 4 and -4 would make a thick rectangular face.

More learnin’ can be aquired here: http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/