JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="clock"></canvas>

CSS

body,
        html {
            width: 100%;
            height: 100%;
            margin: 0px;
            font-family: Josefin Sans, Helvetica, sans-serif;
            background: #1A4978;
        }

JavaScript

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();
 ...