Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="canvasAnimation" width="600" height="600"></canvas>
<style>
    canvas {
        border:1px solid black;
    }
</style>

<script>
    var canvas = document.getElementById("canvasAnimation");
    var ctx = canvas.getContext("2d");
    var d = new Date();

    var timeUpdater = {
        seconds: function () {
            return (d.getSeconds() / 60) * (Math.PI * 2);
        },
        minutes: function () {
            return (d.getMinutes() / 60) * (Math.PI * 2);
        },
        hours: function () {
            return (d.getHours() / 24) * (Math.PI * 2);
        }

    };
    var secondsMask = {
        color: "rgba(0, 0, 0, 1)",
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 300,
        startAngle: 0,
        endAngle: 2 * Math.PI,

        draw: function() {
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
            ctx.fill();
            ctx.closePath();
        }
    };

    var seconds = {
        color: "rgba(100, 55, 0, 1)",
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 300,
        startAngle: 0,
        endAngle: timeUpdater.seconds(),

        draw: function() {
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x, this.y, this.radius, this.startAngle, -this.endAngle, true);
            ctx.lineTo(this.x, this.y);
            ctx.fill();
            ctx.closePath();
        }
    };

    var minutesMask = {
        color: "rgba(0, 0, 0, 1)",
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 200,
        startAngle: 0,
        endAngle: 2 * Math.PI,

        draw: function() {
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
            ctx.fill();
            ctx.closePath();
        }
    };

    var minutes = {
        color: "rgba(255, 0, 0, 1)",
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 200,
        startAngle: 0,
        endAngle: timeUpdater.minutes(),

        draw: function() {
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x, this.y, this.radius, this.startAngle, -this.endAngle, true);
            ctx.lineTo(this.x, this.y);
            ctx.fill();
            ctx.closePath();
        }
    };

    var hoursMask = {
        color: "rgba(0, 0, 0, 1)",
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 100,
        startAngle: 0,
        endAngle: 2 * Math.PI,

        draw: function() {
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x, this.y, this.radius, this.startAngle, this.endAngle);
            ctx.fill();
            ctx.closePath();
        }
    };

    var hours = {
        color: "rgba(0, 0, 255, 1)",
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 100,
        startAngle: 0,
        endAngle: timeUpdater.hours(),

        draw: function() {
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x, this.y, this.radius, this.startAngle, -this.endAngle, true);
            ctx.lineTo(this.x, this.y);
            ctx.fill();
            ctx.closePath();
        }
    };

    var draw = function() {
        secondsMask.draw();
        seconds.draw();
        minutesMask.draw();
        minutes.draw();
        hoursMask.draw();
        hours.draw();
    };

    setInterval(draw(), 500);

</script>
</body>
</html>