How to add gradient to strokeStyle canvas in javascript

How do I add gradient color to strokeStyle canvas in javascript.
Please help me my code works perfect but problem is only that I've been trying to add gradient color to a stroke style but it just breaks my code.

Any one who can help on this Gradient color to strokeStyle
<br>
HTML

      <div class="countItem minutes">
        <canvas id="minutes-canvas" width="200" height="200"></canvas>
        <svg width="100%" height="100%">
            <circle id="outer" cx="50%" cy="50%" r="45%" fill="transparent" stroke-width="1%" stroke="#fff" />
        </svg>
        <h3>
            <span id="minutes-value"></span><br>
            <small>minutes</small>
        </h3>
    </div>

JAVASCRIPT

// Set Launch Date (ms)
const launchDate = new Date("May 7, 2020 00:00").getTime();

// Context object
const c = {
    context: {},
    values: {},
    times: {}
};

// Convert radians to degrees
function deg(d) {
    return (Math.PI / 180) * d - (Math.PI / 180) * 90;
}

function render() {
    c.context.minutes.clearRect(0, 0, 200, 200);
    c.context.minutes.beginPath();
    c.context.minutes.strokeStyle = "#bbee2b";
    c.context.minutes.arc(100, 100, 90, deg(0), deg(6 * (c.times.minutes - 60)));
    c.context.minutes.lineWidth = 12;
    c.context.minutes.lineCap = "round";
    c.context.minutes.stroke();

}

function init() {
    // Get 2D contexts
    c.context.minutes = document.getElementById('minutes-canvas').getContext('2d');

    // Get displayed values
    c.values.minutes = document.getElementById('minutes-value');

    setInterval(function () {
        // Get todays date and time (ms)
        const now = new Date().getTime();

        // Get distance from now to launchDate
        const distance = launchDate - now;

        // Time calculations
        c.times.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        c.values.minutes.innerText = c.times.minutes;

        render(); // Draw!
    }, 1000);
}

init();

You can create a CanvasGradient by calling the methods createLinearGradient or createRadialGradient of your CanvasRenderingContext2D. After creating a gradient you add color stops to it by calling the method addColorStop(offset, color).

In your code you are storing the CanvasRenderingContext2D in c.context.minutes, so you can do something along these lines:

function render() {
    c.context.minutes.clearRect(0, 0, 200, 200);
    c.context.minutes.beginPath();
    
    const gradient = c.context.minutes.createLinearGradient(0,0, 200,200);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(.5, 'blue');
    gradient.addColorStop(1, 'green');
    c.context.minutes.strokeStyle = gradient;
    
    c.context.minutes.arc(100, 100, 90, deg(0), deg(6 * (c.times.minutes - 60)));
    c.context.minutes.lineWidth = 12;
    c.context.minutes.lineCap = "round";
    c.context.minutes.stroke();
}

References: https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient

You can create a gradient and assign that to stroke


var gradient = document.getElementById('minutes-canvas').getContext('2d').createLinearGradient(0, 0, 0, 170);
gradient.addColorStop(0, '#05a');
gradient.addColorStop(1, '#0a5');


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Set Launch Date (ms)
const launchDate = new Date("May 7, 2020 00:00").getTime();
// Context object
const c = {
context: {},
values: {},
times: {}
};
// Convert radians to degrees
function deg(d) {
return (Math.PI / 180) * d - (Math.PI / 180) * 90;
}
function render() {
var gradient = document.getElementById('minutes-canvas').getContext('2d').createLinearGradient(0, 0, 0, 170);
gradient.addColorStop(0, '#05a');
gradient.addColorStop(1, '#0a5');
c.context.minutes.clearRect(0, 0, 200, 200);
c.context.minutes.beginPath();
c.context.minutes.strokeStyle = gradient;
c.context.minutes.arc(100, 100, 90, deg(0), deg(6 * (c.times.minutes - 60)));
c.context.minutes.lineWidth = 12;
c.context.minutes.lineCap = "round";
c.context.minutes.stroke();
}
function init() {
// Get 2D contexts
c.context.minutes = document.getElementById('minutes-canvas').getContext('2d');
// Get displayed values
c.values.minutes = document.getElementById('minutes-value');
setInterval(function() {
// Get todays date and time (ms)
const now = new Date().getTime();
// Get distance from now to launchDate
const distance = launchDate - now;
// Time calculations
c.times.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
c.values.minutes.innerText = c.times.minutes;
render(); // Draw!
}, 1000);
}
init();

<!-- language: lang-html -->

<div class="countItem minutes">
<canvas id="minutes-canvas" width="200" height="200"></canvas>
<svg width="100%" height="100%">
<circle id="outer" cx="50%" cy="50%" r="45%" fill="transparent" stroke-width="1%" stroke="#fff" />
</svg>
<h3>
<span id="minutes-value"></span><br>
<small>minutes</small>
</h3>
</div>

<!-- end snippet -->