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="display" class="circlecountdown"
            width="220" height="220"></canvas>
        <input id="val" />

JavaScript

$("#val").on("change", function () {
            updateCircleDisplay("#display", this.value);
        })
        function updateCircleDisplay(selector, value) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var deg = value / max * 360;
                canv.setLayer('text', {
                    text: canv.data("templateText").replace("{value}", value)
                }).stopLayer('circle')
                .animateLayer('circle', {
                    end: deg
                }, {
                    duration: 1000,
                    easing: 'linear',
                });
            });
        }
        function createCircleDisplay(selector, value, max, options) {
            var opts = {
                radius: 100,
                colorCircle: "blue",
                strokeWidthCircle: 20,
                colorBgCircle: "lightgrey",
                strokeWidthBgCircle: 20,
                colorText: "orange",
                templateText: "{value} $"
            }
            $.extend(opts, options);
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                canv.data("max", max);
                canv.data("templateText", opts.templateText);
                var deg = value / max * 360;
                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: opts.colorBgCircle,
                    strokeWidth: opts.strokeWidthBgCircle,
                    x: pos, y: pos,
                    radius: opts.radius,
                    // start and end angles in degrees
                    start: 0, end: 360
                });
               ...