How to add gradient to strokeStyle canvas in javascript

Question

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
HTML

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();

user_4614170 · Answer

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

user_1395787 · Answer

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');

// 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();


  
  
  
    

    minutes

How to add gradient to strokeStyle canvas in javascript

2 Answers