IE11 svg image fixes (almende#3477)

* IE11 svg image fixes

* Fixed broken images still trying to draw

* Fixed lint error

lib/network/CachedImage.js

@@ -12,9 +12,9 @@
  */
 class CachedImage {
   /**
-   * @param {Image} image
-   */
-  constructor(image) {  // eslint-disable-line no-unused-vars
+   * @ignore
+   */  
+  constructor() {  // eslint-disable-line no-unused-vars
     this.NUM_ITERATIONS = 4;  // Number of items in the coordinates array
 
     this.image  = new Image();
@@ -36,17 +36,28 @@ class CachedImage {
     this.width  = w;
     this.height = h;
 
+    var h2 = Math.floor(h/2);
+    var h4 = Math.floor(h/4);
+    var h8 = Math.floor(h/8);
+    var h16 = Math.floor(h/16);
+
+    var w2 = Math.floor(w/2);
+    var w4 = Math.floor(w/4);
+    var w8 = Math.floor(w/8);
+    var w16 = Math.floor(w/16);
+
     // Make canvas as small as possible
-    this.canvas.width  = 3*w/4;
-    this.canvas.height = h/2;
+    this.canvas.width  = 3*w4;
+    this.canvas.height = h2;
 
     // Coordinates and sizes of images contained in the canvas
     // Values per row:  [top x, left y, width, height]
+
     this.coordinates = [
-      [ 0    , 0  , w/2 , h/2],
-      [ w/2  , 0  , w/4 , h/4],
-      [ w/2  , h/4, w/8 , h/8],
-      [ 5*w/8, h/4, w/16, h/16]
+      [ 0    , 0  , w2 , h2],
+      [ w2  , 0  , w4 , h4],
+      [ w2  , h4, w8 , h8],
+      [ 5*w8, h4, w16, h16]
     ];
 
     this._fillMipMap();
@@ -114,7 +125,11 @@ class CachedImage {
    * @param {number} height
    */
   drawImageAtPosition(ctx, factor, left, top, width, height) {
-    if (factor > 2 && this.initialized()) {
+
+    if(!this.initialized())
+      return; //can't draw image yet not intialized
+
+    if (factor > 2) {
       // Determine which zoomed image to use
       factor *= 0.5;
       let iterations = 0;
@@ -133,42 +148,12 @@ class CachedImage {
         from[0], from[1], from[2], from[3],
            left,     top,   width,  height
       );
-    } else if (this._isImageOk()) {
+    } else {
       // Draw image directly
       ctx.drawImage(this.image, left, top, width, height);
     }
   }
 
-
-  /**
-   * Check if image is loaded
-   *
-   * Source: http://stackoverflow.com/a/1977898/1223531
-   *
-   * @returns {boolean}
-   * @private
-   */
-  _isImageOk() {
-    var img = this.image;
-
-    // During the onload event, IE correctly identifies any images that
-    // weren’t downloaded as not complete. Others should too. Gecko-based
-    // browsers act like NS4 in that they report this incorrectly.
-    if (!img.complete) {
-        return false;
-    }
-
-    // However, they do have two very useful properties: naturalWidth and
-    // naturalHeight. These give the true size of the image. If it failed
-    // to load, either of these should be zero.
-
-    if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
-        return false;
-    }
-
-    // No other way of checking: assume it’s ok.
-    return true;
-  }
 }