JSFiddle - React, Tailwind, and code Playground
HTML
<script>
(function () {
var ctxProperties = ['fillStyle', 'font', 'globalAlpha', 'globalCompositeOperation',
'lineCap', 'lineDashOffset', 'lineJoin', 'lineWidth',
'miterLimit', 'shadowBlur', 'shadowColor', 'shadowOffsetX',
'shadowOffsetY', 'strokeStyle', 'textAlign', 'textBaseLine'];
var autoscale = function (canvas) {
var ctx = canvas.getContext('2d'),
ratio = window.devicePixelRatio || 1;
if (1 !== ratio) {
canvas.style.width = canvas.width + 'px';
canvas.style.height = canvas.height + 'px';
canvas.width *= ratio;
canvas.height *= ratio;
ctx.scale(ratio, ratio);
}
return canvas;
};
var extendCtx = function (ctx, options) {
for (var i in options) {
if (ctxProperties.indexOf(i) === -1) continue;
ctx[i] = options[i];
}
};
var CircularProgress = this.CircularProgress = function (options) {
var ctx, i, property;
options = options || {};
this.el = document.createElement('canvas');
this.options = options;
options.text = options.text || {};
options.text.value = options.text.value || null;
ctx = this.el.getContext('2d');
for (i in ctxProperties) {
property = ctxProperties[i];
options[property]= typeof options[property] !== 'undefined' ? options[property] : ctx[property];
}
if (options.radius) this.radius(options.radius);
};
CircularProgress.prototype.update = function (value) {
this._percent = value;
this.draw();
return this;
};
CircularProgress.prototype.radius = function (value) {
var size = value * 2;
this.el.width = size;
this.el.height = size;
autoscale(this.el);
return this;
};
CircularProgress.prototype.draw = function () {
var tw, text, fontSize,
options = this.options,
ctx = this.el.getContext('2d'),
percent = Math.min(this._percent, 98),
ratio = window.devicePixelRatio || 3,
angle = Math.PI...