OpenSeadragon issue on Internet Explorer: IndexSizeError on OpenSeadragon.Drawer.blendSketch when calling drawImage.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <button class="toggle">Toggle</button>
    <div id="seadragon-viewer"></div>
    
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script src="http://openseadragon.github.io/openseadragon/openseadragon.js"></script>
    <script src="script.js"></script>
  </body>

</html>

function applyOSDBlendSketchPatch() {
  var originalBlendSketch = OpenSeadragon.Drawer.prototype.blendSketch;
  OpenSeadragon.Drawer.prototype.blendSketch = function(options) {
    if(this.useCanvas && this.sketchCanvas && options && options.bounds) {
      if(options.bounds.x < 0) {
        options.bounds.width += options.bounds.x;
        options.bounds.x = 0;
      }
      if(options.bounds.width > this.canvas.width) {
        options.bounds.width = this.canvas.width;
      }
      if(options.bounds.y < 0) {
        options.bounds.height += options.bounds.y;
        options.bounds.y = 0;
      }
      if(options.bounds.height > this.canvas.height) {
        options.bounds.height = this.canvas.height;
      }
    }
    try {
      originalBlendSketch.apply(this, arguments);
    } catch(err) {
      throw err;
    }
  };
}

// Uncomment to apply the patch that fixes the issue on IE
// applyOSDBlendSketchPatch();

var tileSource1 = {
  type: 'legacy-image-pyramid',
  levels: [
    {
      url: '//upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Aspect_ratio_-_4x3.svg/480px-Aspect_ratio_-_4x3.svg.png',
      width: 480,
      height: 360
    },
    {
      url: '//upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Aspect_ratio_-_4x3.svg/960px-Aspect_ratio_-_4x3.svg.png',
      width: 960,
      height: 720
    },
  ]
};

var tileSource2 = {
  type: 'legacy-image-pyramid',
  levels: [
    {
      url: '//upload.wikimedia.org/wikipedia/commons/thumb/archive/a/a2/20071120015340%21Aspect_ratio_-_4x3.svg/480px-Aspect_ratio_-_4x3.svg.png',
      width: 480,
      height: 360
    },
    {
      url: '//upload.wikimedia.org/wikipedia/commons/thumb/archive/a/a2/20071120015340%21Aspect_ratio_-_4x3.svg/960px-Aspect_ratio_-_4x3.svg.png',
      width: 960,
      height: 720
    },
  ]
};

var viewer = OpenSeadragon({
  id: "seadragon-viewer",
  prefixUrl: "//openseadragon.github.io/openseadragon/images/",
  homeFillsViewer: true,
  smoothTileEdgesMinZoom: Infinity, // single tile does not need smoothing of tile edge
  tileSources: [
    tileSource1,
    tileSource2
  ],
});

viewer.addHandler('open', function(viewer) {

});

var selectedIndex = 1;

$('.toggle').on('click', function() {
  selectedIndex = (selectedIndex + 1) % 2;
  fade(viewer.world.getItemAt(0), (selectedIndex === 0 ? 1 : 0));
  fade(viewer.world.getItemAt(1), (selectedIndex === 1 ? 1 : 0));
});

var fade = function(image, targetOpacity) {
  var currentOpacity = image.getOpacity();
  var step = (targetOpacity - currentOpacity) / 10;
  if (step === 0) {
    return;
  }

  var frame = function() {
    currentOpacity += step;
    if ((step > 0 && currentOpacity >= targetOpacity) || (step < 0 && currentOpacity <= targetOpacity)) {
      image.setOpacity(targetOpacity);
      return;
    }

    image.setOpacity(currentOpacity);
    OpenSeadragon.requestAnimationFrame(frame);
  };

  OpenSeadragon.requestAnimationFrame(frame);
};

#seadragon-viewer {
    position: absolute;
    left: 0;
    top: 30px;
    right: 0;
    bottom: 0;
    width: 200px;
    height:200px;
}