Learning Javascript, I tried to draw a clock, but when it starts to draw the hands, the outline of the clock gets a border.
If I remove the section of Javascript under /* Draw the Hour Hand */ the border goes as well as the hand.
I would have thought context.lineWidth = 0; on line 9 of the JavaScript would have stopped the clock border, but it doesn't.
How do I stop producing the border around the edge of the clock?
/* Define variables for clock canvas */
var canvas = document.getElementById("clock");
var context = canvas.getContext("2d");
var clockRadius = canvas.width / 2;
/* Draw filled clock outline */
context.beginPath();
context.arc(clockRadius, clockRadius, clockRadius, 0, 2 * Math.PI);
context.lineWidth = 0;
context.fillStyle = "#bf7b28";
context.fill();
/* Add the numbers */
context.font = clockRadius / 10 + "px arial";
context.fillStyle = "black";
context.textAlign = "center"; /* centre horizontally */
context.textBaseline = "middle"; /* centre virtically */
/* keep looping until i <= 12, add 1 each loop */
for (var i = 1; i <= 12; i++) {
context.fillText(i, clockRadius + clockRadius * 0.9 * Math.sin(i * 2 * Math.PI / 12), clockRadius - (clockRadius * 0.9 * Math.cos(i * 2 * Math.PI / 12)));
}
/* Get the current time */
var date = new Date();
var mins = date.getMinutes();
var secs = date.getSeconds();
var hours = date.getHours();
/* hours % 12 = 24 hour to 12 hour (get remainder after hours is div by 12) */
var fullHours = hours % 12 + mins / 60 + secs / 3600;
var hourAngle = fullHours * 2 * Math.PI / 12
var minsAngle = mins * 2 * Math.PI / 60
var secsAngle = secs * 2 * Math.PI / 60
/* Draw the Hour Hand */
context.strokeStyle = "black";
context.moveTo(clockRadius, clockRadius);
context.lineTo(clockRadius + clockRadius * 0.5 * Math.sin(hourAngle), clockRadius - (clockRadius * 0.5 * Math.cos(hourAngle)));
context.lineWidth = 5;
context.stroke();<!doctype html>
<html lang="en-GB">
<head>
<title>Javascript Clock</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<canvas id="clock" width="500px" height="500px">
<p>Please update your browser</p> <!-- Fallback used to display message on older browsers which do not support <canvas> tag -->
</canvas>
</body>
</html>You have to call beginPath() before drawing the clock hand so your arc is not affected by the stroke call of the hand.
/* Define variables for clock canvas */
var canvas = document.getElementById("clock");
var context = canvas.getContext("2d");
var clockRadius = canvas.width / 2;
/* Draw filled clock outline */
context.beginPath()
context.arc(clockRadius, clockRadius, clockRadius, 0, 2 * Math.PI);
context.lineWidth = 0;
context.fillStyle = "#bf7b28";
context.fill();
/* Add the numbers */
context.font = clockRadius / 10 + "px arial";
context.fillStyle = "black";
context.textAlign = "center"; /* centre horizontally */
context.textBaseline = "middle"; /* centre virtically */
/* keep looping until i <= 12, add 1 each loop */
for (var i = 1; i <= 12; i++) {
context.fillText(i, clockRadius + clockRadius * 0.9 * Math.sin(i * 2 * Math.PI / 12), clockRadius - (clockRadius * 0.9 * Math.cos(i * 2 * Math.PI / 12)));
}
/* Get the current time */
var date = new Date();
var mins = date.getMinutes();
var secs = date.getSeconds();
var hours = date.getHours();
/* hours % 12 = 24 hour to 12 hour (get remainder after hours is div by 12) */
var fullHours = hours % 12 + mins / 60 + secs / 3600;
var hourAngle = fullHours * 2 * Math.PI / 12
var minsAngle = mins * 2 * Math.PI / 60
var secsAngle = secs * 2 * Math.PI / 60
/* Draw the Hour Hand */
context.beginPath(); // Here, begin a new path so the arc is not affected by the stroke call
context.strokeStyle = "black";
context.moveTo(clockRadius, clockRadius);
context.lineTo(clockRadius + clockRadius * 0.5 * Math.sin(hourAngle), clockRadius - (clockRadius * 0.5 * Math.cos(hourAngle)));
context.lineWidth = 5;
context.stroke();