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

CodePudding user response：

Internet Explorer did choke on too decimal numbers in RGB CSS values (strokeStyle is parsed as a CSS <color> value).
Your colorTween function will very likely produce such decimal numbers and IE will just ignore the value entirely.

To avoid that, round your R, G, and B values, and while I'm not sure it's needed, you may want to also call .toFixed() on the Alpha value (for R,G,B the decimal is anyway discarded by implementations, and for alpha the maximum granularity is 1/256, i.e ~0.004).

from.forEach(function (fromVal, i) {
  const toVal = to[i];
  const newVal = fromVal   (((toVal - fromVal)/maxStep)*step);
  newColor[i] = i===3 ? newVal.toFixed(3) : Math.round(newVal);