OpenSeadragon IE10 IndexSizeError on Tile.drawCanvas call to canvas drawImage

<!DOCTYPE html>
<html>

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

  <body>
    <div class="fill-container" id="seadragon-viewer"></div>
    
    <script data-require="openseadragon@*" data-semver="2.2.1" src="https://openseadragon.github.io/openseadragon/openseadragon.js"></script>
    <script src="script.js"></script>
  </body>

</html>

fixTileDrawCanvasBug(OpenSeadragon);
fixBlendSketchBug(OpenSeadragon);

var data = {
  url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Aspect_ratio_-_4x3.svg/3072px-Aspect_ratio_-_4x3.svg.png',
  width: 3072,
  height: 2304,
  mimetype: 'image/png',
};

var config = getConfig(data);

var viewer = OpenSeadragon(config);

function getConfig(data) {
  var gestureSettings = {
    clickToZoom: false,
    dblClickToZoom: true,
    flickEnabled: false,
    scrollToZoom: true,
    pinchToZoom: false,
  };

  var gestureSettingsTouch = {
    clickToZoom: false,
    dblClickToZoom: true,
    flickEnabled: false,
    scrollToZoom: true,
    pinchToZoom: true,
  };

  return {
    id: "seadragon-viewer",
    prefixUrl: "http://openseadragon.github.io/openseadragon/images/",

    showZoomControl: false,
    showHomeControl: false,
    showFullPageControl: false,
    showRotationControl: false,
    autoResize: true,
    preserveImageSizeOnResize: true,
    //constrainDuringPan: true,
    preserveViewport: true,
    //immediateRender: true,
    wrapHorizontal: false,
    wrapVertical: false,
    //homeFillsViewer: true,

    //visibilityRatio: 1,
    //animationTime: 0.01,
    //minPixelRatio: 0.4, // Higher means lower image quality. Set to 1.5 for mobile on slow connection
    defaultZoomLevel: 0, // let OpenSeadragon calculate min zoom
    //minZoomLevel: 0,
    //minZoomImageRatio: 1,
    //maxZoomPixelRatio: 10,
    zoomPerClick: 1.5,
    zoomPerScroll: 1.2,

    gestureSettingsMouse: gestureSettings,
    gestureSettingsPen: gestureSettings,
    gestureSettingsUnknown: gestureSettings,
    gestureSettingsTouch: gestureSettingsTouch,

    smoothTileEdgesMinZoom: Infinity, // Single tile, does not need smoothing of tile edge
    tileSources: {
      type: 'image',
      url: data.url,
      //buildPyramid: false,
    },

    //useCanvas: false,
  };
}

function fixTileDrawCanvasBug($) {
  // Try to fix OpenSeadragon bug
  // https://github.com/openseadragon/openseadragon/issues/1069
  $.Tile.prototype.drawCanvas = function(context, drawingHandler, scale, translate) {
    var position = this.position.times($.pixelDensityRatio),
      size = this.size.times($.pixelDensityRatio),
      rendered;

    if (!this.context2D && !this.cacheImageRecord) {
      $.console.warn(
        '[Tile.drawCanvas] attempting to draw tile %s when it\'s not cached',
        this.toString());
      return;
    }

    rendered = this.context2D || this.cacheImageRecord.getRenderedContext();

    if (!this.loaded || !rendered) {
      $.console.warn(
        "Attempting to draw tile %s when it's not yet loaded.",
        this.toString()
      );

      return;
    }

    context.save();

    context.globalAlpha = this.opacity;

    if (typeof scale === 'number' && scale !== 1) {
      // draw tile at a different scale
      position = position.times(scale);
      size = size.times(scale);
    }

    if (translate instanceof $.Point) {
      // shift tile position slightly
      position = position.plus(translate);
    }

    //if we are supposed to be rendering fully opaque rectangle,
    //ie its done fading or fading is turned off, and if we are drawing
    //an image with an alpha channel, then the only way
    //to avoid seeing the tile underneath is to clear the rectangle
    if (context.globalAlpha === 1 && this._hasTransparencyChannel()) {
      //clearing only the inside of the rectangle occupied
      //by the png prevents edge flikering
      context.clearRect(
        position.x + 1,
        position.y + 1,
        size.x - 2,
        size.y - 2
      );
    }

    // This gives the application a chance to make image manipulation
    // changes as we are rendering the image
    drawingHandler({
      context: context,
      tile: this,
      rendered: rendered
    });

    if ($.Browser.vendor === $.BROWSERS.IE && $.Browser.version === 10) {
      drawImageAsTiles(context, 512, rendered.canvas, 0, 0, rendered.canvas.width, rendered.canvas.height, position.x, position.y, size.x, size.y);
    } else {
      try {
        context.drawImage(
          rendered.canvas,
          0,
          0,
          rendered.canvas.width,
          rendered.canvas.height,
          position.x,
          position.y,
          size.x,
          size.y
        );
      } catch(err) {
        console.error(err);
        console.log([0, 0, rendered.canvas.width, rendered.canvas.height, position.x, position.y, size.x, size.y].join(', '));
      }
    }

    context.restore();

    function drawImageAsTiles(context, tileSize, image, sx, sy, sw, sh, dx, dy, dw, dh) {
      var x = dw / sw;
      var y = dh / sh;

      var nsw;
      var nsh;
      var ndw;
      var ndh;

      try {
        for (var i = 0; i * tileSize < sh && i * (tileSize * y) < dh; i++) {
          nsh = tileSize;
          // if ((i * nsh) + nsh > sh) {
          //   nsh = (i * nsh) + nsh - sh;
          // }

          ndh = tileSize * y;
          // if ((i * ndh) + ndh > dh) {
          //   ndh = (i * ndh) + ndh - dh;
          // }

          for (var j = 0; j * tileSize < sw && j * (tileSize * x) < dw; j++) {
            nsw = tileSize;
            // if ((j * nsw) + nsw > sw) {
            //   nsw = (j * nsw) + nsw - sw;
            // }

            ndw = tileSize * x;
            // if ((j * ndw) + ndw > dw) {
            //   ndw = (j * ndw) + ndw - dw;
            // }

            context.drawImage(image, sx + (j * tileSize), sy + (i * tileSize), nsw, nsh, dx + (j * tileSize * x), dy + (i * tileSize * y), ndw, ndh);
          }
        }
      } catch (err) {
        console.error(err);
        console.log([sx + (j * tileSize), sy + (i * tileSize), nsw, nsh, dx + (j * tileSize * x), dy + (i * tileSize * y), ndw, ndh].join(', '));
      }
    }
  };
}

function fixBlendSketchBug(OpenSeadragon) {
  //Fix bug: https://github.com/openseadragon/openseadragon/issues/1033
  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;
      }
    }

    originalBlendSketch.apply(this, arguments);
  };
}

/* Styles go here */

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.fill-container {
  position: relative;
  width: 100%;
  height: 100%;
}