JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: absolute;">
Click the image to toggle between rings and circles
</div>
<canvas id="canvas" /><br />

CSS

body, html {
  padding: 0;
  margin: 0;
  display: flex;
  height: 100%;
  width: 100%;
}

#canvas {
  margin: auto;
}

JavaScript

/**
 * @description Options used when calling CanvasRenderingContext2D.strokeArcGradient() and 
 *              CanvasRenderingContext2D.fillArcGradient().
 * @property {Boolean} useDegrees Whether the specified angles should be interpreted as degrees rather than radians. 
 *                                (default: false)
 * @property {Number} resolutionFactor The number of lines to render per pixel along the arc.  A higher number produces 
 *                                     a cleaner gradient, but has worse performance for large radii.  Must be greater 
 *                                     than 0. (default: 8)
 */
class ArcGradientOptions {
    constructor(options) {
        function validateParam(test, errorMessage, fatal = false) {
            if (!test) {
                if (fatal) {
                    throw new Error(errorMessage);
                } else {
                    console.assert(false, errorMessage);
                }
            }
        }

        options = Object.assign({
            useDegrees: false,
            resolutionFactor: 8,
        }, options);

        validateParam(
            (options.resolutionFactor instanceof Number | typeof options.resolutionFactor === 'number') && 
                options.resolutionFactor > 0, 
            `ArcGradientOptions.resolutionFactor must be a Number greater than 0.  Given: ${options.resolutionFactor}`, 
            true);

        Object.assign(this, options);
    }
};

(function () {
    /**
     * @description Strokes an arc using a linear gradient.
     * @param {number} x The x-component of origin of the arc.
     * @param {number} y The y-component of the origin of the arc.
     * @param {number} radius The radius of the arc.
     * @param {number} startAngle Where in the circle to begin the stroke.
     * @param {number} endAngle Where in the circle to end the stroke.
     * @param {ArcGradientOptions} options Additional options.
     */
   ...