Search code examples
javascriptinternet-explorercanvashtml5-canvas

Canvas strokeStyle not changing in internet explorer

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 snippet showing the issue:

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

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

const fromColor = [0,0,0,1]; //black
const toColor = [255,255,255,1]; //white

const y = canvas.height/2;
let x = 0;
let prevX = 0;

//draw loop
setInterval(function () {
    //increase x
    x++;

    //get color fading into next color
    const drawColor = colorTween(fromColor, toColor, x, canvas.width);
      
    //draw line segment
    ctx.strokeStyle = "rgba("+drawColor[0]+","+drawColor[1]+","+drawColor[2]+","+drawColor[3]+")";

    ctx.beginPath();
    ctx.moveTo(prevX, y);
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.closePath();

    //setup for next loop
    prevX = x;
}, 1000/60);
body, canvas {
    margin: 0;
    padding: 0;
    border: none;
    overflow: none;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

Solution

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