From da819ac15acfbb45e3c2d9b172935a941fa97bbd Mon Sep 17 00:00:00 2001
From: Philip Giuliani <info@philipg.net>
Date: Thu, 9 Apr 2015 14:25:07 +0200
Subject: [PATCH] Add possibility to draw gradients and images

---
 src/drawer.js                           | 8 +++++++-
 src/openseadragon.js                    | 2 +-
 src/tiledimage.js                       | 2 +-
 test/demo/fitboundswithconstraints.html | 8 ++++++++
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/drawer.js b/src/drawer.js
index 3ebb54ca..6d989efd 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -293,7 +293,13 @@ $.Drawer.prototype = /** @lends OpenSeadragon.Drawer.prototype */{
             return;
         }
 
-        this.context.fillStyle = fillStyle || "#FFFFFF";
+        if ( typeof fillStyle === "function" ) {
+            this.context.fillStyle = fillStyle(this.context);
+        }
+        else {
+            this.context.fillStyle = fillStyle;
+        }
+
         this.context.fillRect(rect.x, rect.y, rect.width, rect.height);
     },
 
diff --git a/src/openseadragon.js b/src/openseadragon.js
index e0ff9c9b..ec5b0ed5 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -206,7 +206,7 @@
   * @property {Number} [opacity=1]
   *     Opacity of the drawer (1=opaque, 0=transparent)
   *
-  * @property {String|Object} [placeholderFillStyle=null]
+  * @property {String|Function} [placeholderFillStyle=null]
   *     Draws a colored rectangle behind the tile if it is not loaded yet.
   *
   * @property {Number} [degrees=0]
diff --git a/src/tiledimage.js b/src/tiledimage.js
index 14f342f0..c13b4568 100644
--- a/src/tiledimage.js
+++ b/src/tiledimage.js
@@ -65,7 +65,7 @@
  * @param {Boolean} [options.alwaysBlend] - See {@link OpenSeadragon.Options}.
  * @param {Number} [options.minPixelRatio] - See {@link OpenSeadragon.Options}.
  * @param {Boolean} [options.debugMode] - See {@link OpenSeadragon.Options}.
- * @param {String|Object} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}.
+ * @param {String|Function} [options.placeholderFillStyle] - See {@link OpenSeadragon.Options}.
  * @param {String|Boolean} [options.crossOriginPolicy] - See {@link OpenSeadragon.Options}.
  */
 $.TiledImage = function( options ) {
diff --git a/test/demo/fitboundswithconstraints.html b/test/demo/fitboundswithconstraints.html
index 51889d88..7e9ba1bd 100644
--- a/test/demo/fitboundswithconstraints.html
+++ b/test/demo/fitboundswithconstraints.html
@@ -67,6 +67,14 @@
                         Height: 3448
                     }
                 }
+            },
+            placeholderFillStyle: "#FF0000",
+            placeholderFillStyle: function(context) {
+                var gradient = context.createLinearGradient(0,0,1000,0);
+                gradient.addColorStop(0,"black");
+                gradient.addColorStop(1,"red");
+
+                return gradient;
             }
         });
         _viewer.addHandler("open", function() {