CODEWITHSUNDEEP
javascriptcanvas
Adam Birman
Adam Birman

Reputation: 11

canvas animation dont work in ie

this animation working in firefox and chrome so good but dont working in ie od edge browser... what should i do ? what is the solution? please somebody help me thank you very much

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
canvas.width = parseInt(getComputedStyle(canvas).width);
canvas.height = parseInt(getComputedStyle(canvas).height);

var P = 4;
var A = 4;

function draw(shift) {
   var w = canvas.width;
   var h = canvas.height;
   shift = shift >= 500*Math.PI ? shift - 100*Math.PI : shift;
   ctx.clearRect(0, 0, w, h);
   var grd = ctx.createLinearGradient(0, 0, w, h);
   grd.addColorStop(0, "#4a8bf5");
   grd.addColorStop(1, "#f16b55");
   ctx.strokeStyle = grd;

   ctx.lineCap = "round";
   for (var i = 0; i < w; ) {
      var _A = Math.abs(A*Math.cos(2*i));
      ctx.beginPath();
      var pos = Math.exp(-_A * i / w) * Math.sin(P * Math.PI * (i + shift) / w);
      pos *= h / 2;
      var lw = Math.exp(-_A * i / w) * Math.sin(3 * Math.PI * (i - shift) / w) * 2;
      ctx.lineWidth = (lw)+1;
      ctx.lineTo(i, h / 2 - pos);
      ctx.closePath();
      ctx.stroke();
      i += 1;
   }

   window.requestAnimationFrame(() => {
      draw(shift + 1);
   });
}
draw(0);
canvas {
background:black;
}
<canvas id="canvas"></canvas>

Upvotes: 1

Views: 57

Answers (2)

Rukshan Dangalla
Rukshan Dangalla

Reputation: 2590

Can you try it with your element.getBoundingClientRect().transform.width Sometimes window.getComputedStyle return different values for different browsers.

Upvotes: 0

user1693593
user1693593

Reputation:

You will first need to remove the ES6 syntax from requestAnimationFrame() for it to work in IE.

The next problem is that there is a closePath() in action. This will freak out IE/Edge when there is no moveTo() used and/or if the resulting points sits right on top of each other.

The workaround is simple enough though: remove closePath() (not needed for points or lines) and use moveTo() and lineTo() for each sub-path. In addition you will have to offset x or y in one of the calls so the point is not exact on top.

I would also recommend moving beginPath() and stroke() as well as everything static outside the loop itself. This will increase the performance.

Modified code (with modified loop code):

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
// these make no sense here btw:
//canvas.width = parseInt(getComputedStyle(canvas).width);
//canvas.height = parseInt(getComputedStyle(canvas).height);

var P = 4;
var A = 4;

// move all these outside the loop (reinvoke if size of canvas changes)
var w = canvas.width;
var h = canvas.height;
var grd = ctx.createLinearGradient(0, 0, w, 0);
grd.addColorStop(0, "#4a8bf5");
grd.addColorStop(1, "#f16b55");
ctx.strokeStyle = grd;
ctx.lineCap = "round";

function draw(shift) {
   shift = shift >= 500*Math.PI ? shift - 100*Math.PI : shift;
   ctx.clearRect(0, 0, w, h);
   ctx.beginPath();  // outside iteration
   for (var i = 0, _A, pos, lw; i < w; ) {
      _A = Math.abs(A*Math.cos(2*i));
      pos = Math.exp(-_A * i / w) * Math.sin(P * Math.PI * (i + shift) / w);
      pos *= h * 0.5;
      lw = Math.exp(-_A * i / w) * Math.sin(3 * Math.PI * (i - shift) / w) * 2;
      ctx.lineWidth = lw + 1;

      // IE/Edge needs a first moveTo(). Creates a sub-path
      ctx.moveTo(i, h * 0.5 - pos);

      ctx.lineTo(i + 1, h * 0.5 - pos);  // offset x or y slightly
      i += 1;
   }
   ctx.stroke();  // fill all a single  time

   // IE don't support ES6 syntax
   window.requestAnimationFrame(function() {
      draw(shift + 1);
   });
}
draw(0);
canvas {
background:black;
}
<canvas id="canvas"></canvas>

Upvotes: 2

Related Questions