JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jcanvas/20.1.2/jcanvas.js"></script>
    <canvas id="firstcountdown" class="circlecountdown"
             width="220" height="220">
    </canvas>
    <canvas id="secondcountdown" class="circlecountdown"
            width="220" height="220">
    </canvas>
    <canvas id="thirdcountdown" class="circlecountdown"
            width="220" height="220">
    </canvas>

JavaScript

function callbackSecond() {
            console.log("second complete")
            startCircleCountdown("#thirdcountdown");
        }
        function callbackFirst() {
            console.log("first complete")
            startCircleCountdown("#secondcountdown", callbackSecond);
        }
        function startCircleCountdown(selector, callbackComplete) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var time = canv.data("time");
                canv.animateLayer('circle', {
                    end: 0
                }, {
                    duration: time * 1000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        var secs = Math.floor(now * time / 360);
                        canv.setLayer('secs', {
                            text: secs
                        })
                        .drawLayers();
                    },
                    complete: function () {
                        if (callbackComplete) callbackComplete();
                    }
                });
            });
        }
        function createCircleCountdown(selector, time, options) {
            var opts = {
                radius: 100,
                colorCircle: "turquoise",
                strokeWidthCircle: 20,
                colorDigits: "orange",
                textLabel: "SEKUNDEN",
                colorLabel: "black"
            }
            $.extend(opts, options);
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                canv.data("time", time);
                var size = 2 * opts.radius + opts.strokeWidthCircle;
                var pos = opts.radius + opts.strokeWidthCircle / 2;
                canv.attr("width", size);
                canv.attr("height", size);
                canv.drawArc({
                    layer: true,
                    name: 'circle2',
                    strokeStyle:...