Canvas strokeStyle not changing in internet explorer

Question

https://jsbin.com/mareyat/1/edit?html,output

I'm trying to get a webpage screen saver working on windows 10, but it's using internet explorer:(

I want the color of a line to fade into the next color while being drawn. This works fine in Chrome, but in internet explorer the strokeStyle doesn't update on every step.

I've included a link to a jsbin showing the issue, and copied the code below:

const canvas = document.getElementById('canvas'); 
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.lineWidth = 50;
ctx.lineCap = "round";

let color, nextColor, prevX, prevY;

function line(x1, y1, x2, y2, drawColor) {
        ctx.strokeStyle = "rgba("+drawColor[0]+","+drawColor[1]+","+drawColor[2]+","+drawColor[3]+")";
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
        ctx.closePath();
}

function colorTween(from, to, step, maxStep) {
        const newColor = [0,0,0,0];
        from.forEach(function (fromVal, i) {
            const toVal = to[i];
            newColor[i] = fromVal + (((toVal - fromVal)/maxStep)*step);
        });
        return newColor;
}

function rand(min, max) {
        return Math.floor(Math.random() * max) + min;
}
function randDecimal(min,max){
        return (Math.random() * (max - min) + min)
}
function generateRandomColor() {
        return [
            rand(0, 255),
            rand(0, 255),
            rand(0, 255),
            randDecimal(0.2, 1)
        ];
}
function setRandomColor() {
        color = nextColor;
        nextColor = generateRandomColor();
}

//init
const yStartPos = canvas.height/2;
const maxStep = 100;
prevX = 0;
prevY = yStartPos;

//setup initial colors
nextColor = generateRandomColor();
setRandomColor();

//draw loop
let step = 0;
let time = 0;
setInterval(function () {
    //make wave point
  const newX = time * 100;
  const newY = yStartPos + Math.sin(time) * yStartPos*0.9;

  //get color fading into next color
  const drawColor = colorTween(color, nextColor, step, maxStep);
  //draw line segment
  line(prevX, prevY, newX, newY, drawColor);

  //setup for next loop
  prevX = newX;
  prevY = newY;
  step++;
  time += 0.01;

  if (step == maxStep) { //change color
    step = 0;
    setRandomColor();
  }

  if (newX > canvas.width) { //start again
    time = 0;
    prevX = 0;
    prevY = yStartPos
  }
}, 1000/60);

Answer 1

Internet Explorer did choke on too long decimal numbers in CSS values ( strokeStyle is parsed as a CSS <color> value).
Your colorTween function will likely produce numbers like 0.666666666... and IE will just ignore the "rgba(r, g, b, 0.666666666...)" value entirely.

To avoid that, call .toFixed() on the value you set in this function, 2 would be safe, but if you want to keep the maximum granularity which is 1/256 (~0.004), you may want to try 3 instead.

newColor[i] = (fromVal + (((toVal - fromVal)/maxStep)*step)).toFixed(3);