Added cloning of image element, color cloning

src/ol/style/fill.js

@@ -31,13 +31,14 @@ ol.style.Fill = function(opt_options) {
 
 
 /**
- * Clones the style.
+ * Clones the style. The color is not cloned if it is an {@link ol.ColorLike}.
  * @return {ol.style.Fill} The cloned style.
  * @api
  */
 ol.style.Fill.prototype.clone = function() {
+  var color = this.getColor();
   return new ol.style.Fill({
-    color: (this.getColor() instanceof Array) ? this.getColor().slice(0) : this.getColor()
+    color: (color && color.slice) ? color.slice() : color || undefined
   });
 };
 

src/ol/style/icon.js

@@ -179,20 +179,32 @@ ol.inherits(ol.style.Icon, ol.style.Image);
  * @api
  */
 ol.style.Icon.prototype.clone = function() {
-  var useImg = (this.iconImage_.getImageState() === ol.Image.State.LOADED);
+  var oldImage = this.getImage(1);
+  var newImage;
+  if (this.iconImage_.getImageState() === ol.Image.State.LOADED) {
+    if (oldImage.tagName.toUpperCase() === 'IMG') {
+      newImage = /** @type {Image} */ (oldImage.cloneNode(true));
+    } else {
+      newImage = /** @type {HTMLCanvasElement} */ (document.createElement('canvas'));
+      var context = newImage.getContext('2d');
+      newImage.width = oldImage.width;
+      newImage.height = oldImage.height;
+      context.drawImage(oldImage, 0, 0);
+    }
+  }
   return new ol.style.Icon({
-    anchor: this.anchor_.slice(0),
+    anchor: this.anchor_.slice(),
     anchorOrigin: this.anchorOrigin_,
     anchorXUnits: this.anchorXUnits_,
     anchorYUnits: this.anchorYUnits_,
     crossOrigin: this.crossOrigin_,
-    color: this.color_ !== null ? this.color_.slice(0) : undefined,
+    color: (this.color_ && this.color_.slice) ? this.color_.slice() : this.color_ || undefined,
-    img: useImg ? this.getImage(1) : undefined,
+    img: newImage ? newImage : undefined,
-    imgSize: useImg ? this.iconImage_.getSize().slice(0) : undefined,
+    imgSize: newImage ? this.iconImage_.getSize().slice() : undefined,
-    src: useImg ? undefined : this.getSrc(),
+    src: newImage ? undefined : this.getSrc(),
-    offset: this.offset_.slice(0),
+    offset: this.offset_.slice(),
     offsetOrigin: this.offsetOrigin_,
-    size: this.size_ !== null ? this.size_.slice(0) : undefined,
+    size: this.size_ !== null ? this.size_.slice() : undefined,
     opacity: this.getOpacity(),
     scale: this.getScale(),
     snapToPixel: this.getSnapToPixel(),

src/ol/style/stroke.js

@@ -68,10 +68,11 @@ ol.style.Stroke = function(opt_options) {
  * @api
  */
 ol.style.Stroke.prototype.clone = function() {
+  var color = this.getColor();
   return new ol.style.Stroke({
-    color: (this.getColor() instanceof Array) ? this.getColor().slice(0) : this.getColor(),
+    color: (color && color.slice) ? color.slice() : color || undefined,
     lineCap: this.getLineCap(),
-    lineDash: this.getLineDash() ? this.getLineDash().slice(0) : undefined,
+    lineDash: this.getLineDash() ? this.getLineDash().slice() : undefined,
     lineJoin: this.getLineJoin(),
     miterLimit: this.getMiterLimit(),
     width: this.getWidth()

test/spec/ol/style/icon.test.js

@@ -78,6 +78,7 @@ describe('ol.style.Icon', function() {
       expect(original.crossOrigin_).to.be(clone.crossOrigin_);
       expect(original.color_).to.not.be(clone.color_);
       expect(original.color_).to.eql(clone.color_);
+      expect(original.getImage(1)).not.to.be(clone.getImage(1));
       expect(original.getImage(1).src).to.be(clone.getImage(1).src);
       expect(original.getImage(1).toDataURL()).to.be(original.getImage(1).toDataURL());
       expect(original.offset_).to.not.be(clone.offset_);