Canvas - Arc suddenly vanishes

So I'm making a basic clock just for fun with minute and second arcs. However, after a new minute starts, the minute arc quickly vanishes from the canvas. Why?

Here is a JSFiddle: http://ift.tt/1IVUD9P

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