Use compositing operation for icon colorization when possible.

src/ol/style/IconImage.js

@@ -232,25 +232,18 @@ class IconImage extends EventTarget {
     ctx.scale(pixelRatio, pixelRatio);
     ctx.drawImage(this.image_, 0, 0);
 
-    if (this.isTainted_()) {
-      // If reading from the canvas throws a SecurityError the same effect can be
-      // achieved with globalCompositeOperation.
-      // This could be used as the default, but it is not fully supported by all
-      // browsers. E. g. Internet Explorer 11 does not support the multiply
-      // operation and the resulting image shape will be completelly filled with
-      // the provided color.
-      // So this is only used as a fallback. It is still better than having no icon
-      // at all.
-      const c = this.color_;
     ctx.globalCompositeOperation = 'multiply';
+    // Internet Explorer 11 does not support the multiply operation.
+    // If the canvas is tainted in Internet Explorer this still produces
+    // a solid color image with the shape of the icon.
+    if (ctx.globalCompositeOperation === 'multiply' || this.isTainted_()) {
+      const c = this.color_;
       ctx.fillStyle = 'rgb(' + c[0] + ',' + c[1] + ',' + c[2] + ')';
       ctx.fillRect(0, 0, canvas.width, canvas.height);
 
       ctx.globalCompositeOperation = 'destination-in';
       ctx.drawImage(this.image_, 0, 0);
-      return;
-    }
-
+    } else {
       const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
       const data = imgData.data;
       const r = this.color_[0] / 255.0;
@@ -264,6 +257,7 @@ class IconImage extends EventTarget {
       }
       ctx.putImageData(imgData, 0, 0);
     }
+  }
 
   /**
    * Discards event handlers which listen for load completion or errors.