Overloading fill color (polygon or text) with CanvasPattern and CanvasGradient.

externs/olx.js

@@ -6158,16 +6158,17 @@ olx.style.CircleOptions.prototype.atlasManager;
 
 
 /**
- * @typedef {{color: (ol.Color|string|undefined)}}
+ * @typedef {{color: (ol.Color|ol.ColorLike|undefined)}}
  * @api
  */
 olx.style.FillOptions;
 
 
 /**
- * Color. See {@link ol.color} for possible formats. Default null; if null,
+ * A color, gradient or pattern. See {@link ol.color} 
- * the Canvas/renderer default black will be used.
+ * and {@link ol.colorlike} for possible formats. Default null; 
- * @type {ol.Color|string|undefined}
+ * if null, the Canvas/renderer default black will be used.
+ * @type {ol.Color|ol.ColorLike|undefined}
  * @api
  */
 olx.style.FillOptions.prototype.color;

src/ol/colorlike.js

@@ -0,0 +1,41 @@
+goog.provide('ol.ColorLike');
+goog.provide('ol.colorlike');
+
+goog.require('ol.color');
+
+
+/**
+ * A type accepted by CanvasRenderingContext2D.fillStyle.
+ * Represents a color, pattern, or gradient.
+ *
+ * @typedef {string|CanvasPattern|CanvasGradient}
+ * @api
+ */
+ol.ColorLike;
+
+
+/**
+ * @param {ol.Color|ol.ColorLike} color Color.
+ * @return {ol.ColorLike} The color as an ol.ColorLike
+ * @api
+ */
+ol.colorlike.asColorLike = function(color) {
+  if (ol.colorlike.isColorLike(color)) {
+    return /** @type {string|CanvasPattern|CanvasGradient} */ (color);
+  } else {
+    return ol.color.asString(/** @type {ol.Color} */ (color));
+  }
+};
+
+
+/**
+ * @param {?} color The value that is potentially an ol.ColorLike
+ * @return {boolean} Whether the color is an ol.ColorLike
+ */
+ol.colorlike.isColorLike = function(color) {
+  return (
+      goog.isString(color) ||
+      color instanceof CanvasPattern ||
+      color instanceof CanvasGradient
+  );
+};

src/ol/render/canvas/canvas.js

@@ -2,7 +2,7 @@ goog.provide('ol.render.canvas');
 
 
 /**
- * @typedef {{fillStyle: string}}
+ * @typedef {{fillStyle: ol.ColorLike}}
  */
 ol.render.canvas.FillState;
 

src/ol/render/canvas/canvasimmediate.js

@@ -8,6 +8,7 @@ goog.require('goog.asserts');
 goog.require('goog.vec.Mat4');
 goog.require('ol.array');
 goog.require('ol.color');
+goog.require('ol.colorlike');
 goog.require('ol.extent');
 goog.require('ol.geom.flat.transform');
 goog.require('ol.has');
@@ -835,7 +836,7 @@ ol.render.canvas.Immediate.prototype.setFillStrokeStyle = function(fillStyle, st
   } else {
     var fillStyleColor = fillStyle.getColor();
     this.fillState_ = {
-      fillStyle: ol.color.asString(fillStyleColor ?
+      fillStyle: ol.colorlike.asColorLike(fillStyleColor ?
           fillStyleColor : ol.render.canvas.defaultFillStyle)
     };
   }
@@ -919,7 +920,7 @@ ol.render.canvas.Immediate.prototype.setTextStyle = function(textStyle) {
     } else {
       var textFillStyleColor = textFillStyle.getColor();
       this.textFillState_ = {
-        fillStyle: ol.color.asString(textFillStyleColor ?
+        fillStyle: ol.colorlike.asColorLike(textFillStyleColor ?
             textFillStyleColor : ol.render.canvas.defaultFillStyle)
       };
     }

src/ol/render/canvas/canvasreplay.js

@@ -13,6 +13,7 @@ goog.require('goog.vec.Mat4');
 goog.require('ol');
 goog.require('ol.array');
 goog.require('ol.color');
+goog.require('ol.colorlike');
 goog.require('ol.dom');
 goog.require('ol.extent');
 goog.require('ol.extent.Relationship');
@@ -497,9 +498,11 @@ ol.render.canvas.Replay.prototype.replay_ = function(
         ++i;
         break;
       case ol.render.canvas.Instruction.SET_FILL_STYLE:
-        goog.asserts.assert(typeof instruction[1] === 'string',
+        goog.asserts.assert(
-            '2nd instruction should be a string');
+            ol.colorlike.isColorLike(instruction[1]),
-        context.fillStyle = /** @type {string} */ (instruction[1]);
+            '2nd instruction should be a string, ' +
+            'CanvasPattern, or CanvasGradient');
+        context.fillStyle = /** @type {ol.ColorLike} */ (instruction[1]);
         ++i;
         break;
       case ol.render.canvas.Instruction.SET_STROKE_STYLE:
@@ -1180,14 +1183,14 @@ ol.render.canvas.PolygonReplay = function(tolerance, maxExtent, resolution) {
 
   /**
    * @private
-   * @type {{currentFillStyle: (string|undefined),
+   * @type {{currentFillStyle: (ol.ColorLike|undefined),
    *         currentStrokeStyle: (string|undefined),
    *         currentLineCap: (string|undefined),
    *         currentLineDash: Array.<number>,
    *         currentLineJoin: (string|undefined),
    *         currentLineWidth: (number|undefined),
    *         currentMiterLimit: (number|undefined),
-   *         fillStyle: (string|undefined),
+   *         fillStyle: (ol.ColorLike|undefined),
    *         strokeStyle: (string|undefined),
    *         lineCap: (string|undefined),
    *         lineDash: Array.<number>,
@@ -1435,7 +1438,7 @@ ol.render.canvas.PolygonReplay.prototype.setFillStrokeStyle = function(fillStyle
   var state = this.state_;
   if (fillStyle) {
     var fillStyleColor = fillStyle.getColor();
-    state.fillStyle = ol.color.asString(fillStyleColor ?
+    state.fillStyle = ol.colorlike.asColorLike(fillStyleColor ?
         fillStyleColor : ol.render.canvas.defaultFillStyle);
   } else {
     state.fillStyle = undefined;
@@ -1742,7 +1745,7 @@ ol.render.canvas.TextReplay.prototype.setTextStyle = function(textStyle) {
       this.textFillState_ = null;
     } else {
       var textFillStyleColor = textFillStyle.getColor();
-      var fillStyle = ol.color.asString(textFillStyleColor ?
+      var fillStyle = ol.colorlike.asColorLike(textFillStyleColor ?
           textFillStyleColor : ol.render.canvas.defaultFillStyle);
       if (!this.textFillState_) {
         this.textFillState_ = {

src/ol/style/circlestyle.js

@@ -3,6 +3,7 @@ goog.provide('ol.style.Circle');
 goog.require('goog.asserts');
 goog.require('ol');
 goog.require('ol.color');
+goog.require('ol.colorlike');
 goog.require('ol.has');
 goog.require('ol.render.canvas');
 goog.require('ol.style.Fill');
@@ -340,7 +341,7 @@ ol.style.Circle.prototype.draw_ = function(renderOptions, context, x, y) {
       this.radius_, 0, 2 * Math.PI, true);
 
   if (this.fill_) {
-    context.fillStyle = ol.color.asString(this.fill_.getColor());
+    context.fillStyle = ol.colorlike.asColorLike(this.fill_.getColor());
     context.fill();
   }
   if (this.stroke_) {

src/ol/style/fillstyle.js

@@ -1,5 +1,6 @@
 goog.provide('ol.style.Fill');
 
+goog.require('ol.ColorLike');
 goog.require('ol.color');
 
 
@@ -17,7 +18,7 @@ ol.style.Fill = function(opt_options) {
 
   /**
    * @private
-   * @type {ol.Color|string}
+   * @type {ol.Color|ol.ColorLike}
    */
   this.color_ = options.color !== undefined ? options.color : null;
 
@@ -31,7 +32,7 @@ ol.style.Fill = function(opt_options) {
 
 /**
  * Get the fill color.
- * @return {ol.Color|string} Color.
+ * @return {ol.Color|ol.ColorLike} Color.
  * @api
  */
 ol.style.Fill.prototype.getColor = function() {
@@ -42,7 +43,7 @@ ol.style.Fill.prototype.getColor = function() {
 /**
  * Set the color.
  *
- * @param {ol.Color|string} color Color.
+ * @param {ol.Color|ol.ColorLike} color Color.
  * @api
  */
 ol.style.Fill.prototype.setColor = function(color) {
@@ -56,8 +57,15 @@ ol.style.Fill.prototype.setColor = function(color) {
  */
 ol.style.Fill.prototype.getChecksum = function() {
   if (this.checksum_ === undefined) {
-    this.checksum_ = 'f' + (this.color_ ?
+    if (
-        ol.color.asString(this.color_) : '-');
+        this.color_ instanceof CanvasPattern ||
+        this.color_ instanceof CanvasGradient
+    ) {
+      this.checksum_ = goog.getUid(this.color_).toString();
+    } else {
+      this.checksum_ = 'f' + (this.color_ ?
+          ol.color.asString(this.color_) : '-');
+    }
   }
 
   return this.checksum_;

src/ol/style/regularshapestyle.js

@@ -3,6 +3,7 @@ goog.provide('ol.style.RegularShape');
 goog.require('goog.asserts');
 goog.require('ol');
 goog.require('ol.color');
+goog.require('ol.colorlike');
 goog.require('ol.has');
 goog.require('ol.render.canvas');
 goog.require('ol.style.AtlasManager');
@@ -433,7 +434,7 @@ ol.style.RegularShape.prototype.draw_ = function(renderOptions, context, x, y) {
   }
 
   if (this.fill_) {
-    context.fillStyle = ol.color.asString(this.fill_.getColor());
+    context.fillStyle = ol.colorlike.asColorLike(this.fill_.getColor());
     context.fill();
   }
   if (this.stroke_) {