While working on a clock project purely for enjoyment, I noticed that the minute arc disappears from the canvas as soon as a new minute begins. Any idea why this is happening?
Check out the clock in action: https://jsfiddle.net/y0bson6f/
HTML
<canvas id="clock"></canvas>
CSS
body,
html {
width: 100%;
height: 100%;
margin: 0px;
font-family: Josefin Sans, Helvetica, sans-serif;
background: #1A4978;
}
JS
var canvas = document.getElementById('clock');
var context = canvas.getContext('2d');
function setDimensions() {
context.canvas.width = window.innerWidth * 0.69;
context.canvas.height = window.innerHeight;
}
setDimensions();
var x = 0.5 * canvas.width;
var y = canvas.height / 2;
var radius = 0.25 * context.canvas.width;
var startAngle = 0;
var endAngle = 2 * Math.PI;
var startAnimationMinuteDone = false;
var firstTime = false;
function updateMinute(start, end) {
if (startAnimationMinuteDone == false && firstTime == false) {
context.clearRect(0, 0, canvas.width, canvas.height);
}
setDimensions();
context.beginPath();
context.strokeStyle = "#FF7519";
context.arc(x, y, radius, start, end);
context.lineWidth = 20;
context.stroke();
context.closePath();
}
function updateSecond(start, end) {
context.beginPath();
context.strokeStyle = "#FFA319";
radius = 0.25 * context.canvas.width + 20;
context.arc(x, y, radius, start, end);
context.stroke();
context.closePath();
}
function minuteAntialias(start, end) {
context.clearRect(0, 0, canvas.width, canvas.height);
setDimensions();
context.beginPath();
context.strokeStyle = "#1A4978";
context.arc(x, y, radius, start, end);
context.lineWidth = 20;
context.stroke();
context.closePath();
}
function secondAntialias(start, end) {
context.beginPath();
context.strokeStyle = "#1A4978";
radius = 0.25 * context.canvas.width + 40;
context.arc(x, y, radius, start, end);
context.stroke();
context.closePath();
}
$(document).ready(function() {
var time = 0;
var count = 0;
function clock() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDay();
var hour = date.getHours();
if (hour > 12) {
hour -= 12;
}
var minute = date.getMinutes();
var second = date.getSeconds();
var newestMinuteStart = (time + 1.5) * Math.PI;
var newestSecondStart = (time + 1.5) * Math.PI;
var cachedTime;
if (count <= minute / 30 && !startAnimationMinuteDone) {
time += 0.01;
updateMinute(1.5 * Math.PI, (time + 1.5) * Math.PI);
count += 0.01;
cachedTime = time;
} else if (!startAnimationMinuteDone) {
time = 0;
count = 0;
startAnimationMinuteDone = true;
} else if (count <= second / 30 || second == 0 && startAnimationMinuteDone) {
time += 0.01;
updateSecond(1.5 * Math.PI, (time + 1.5) * Math.PI);
secondAntialias(0, 2 * Math.PI); // Arc matching background colour gives the effect of greater sharpness
count += 0.01;
if (second == 0) {
context.clearRect(0, 0, canvas.width, canvas.height);
startAnimationMinuteDone = false;
firstTime = true;
time = 0;
count = 0;
}
console.log(second);
console.log(startAnimationMinuteDone);
}
}
setInterval(clock, 10);
});