create canvas and gif js/jquery working

HTML

<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.js"></script>
<html>
<head>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.js"></script>
</head>
<body>
<img id="img1" src="https://j.gifs.com/W7DVRJ.gif">
<img id="img2" src="https://j.gifs.com/W7DVRJ.gif">
</body>

</html>

JavaScript

var giff = new GIF({
  workers: 2,
  quality: 10
});
const imageElement1 = document.getElementById("img1");
const imageElement2 = document.getElementById("img2");

// add an image element
giff.addFrame(imageElement1);

// or a canvas element
giff.addFrame(imageElement2);

// or copy the pixels from a canvas context
giff.addFrame(ctx, {
  copy: true
});

giff.on('finished', function(blob) {
  window.open(URL.createObjectURL(blob));
});

giff.render();