From 8f82e755112114ecd58a4bd0d6c67a20a11acf0f Mon Sep 17 00:00:00 2001
From: David Manthey <david.manthey@kitware.com>
Date: Thu, 9 Feb 2017 09:55:22 -0500
Subject: [PATCH] Add options for the background of the screenshot.

---
 src/map.js         | 16 ++++++++++++----
 tests/cases/map.js |  6 ++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/map.js b/src/map.js
index e77b1dc554..678277bc18 100644
--- a/src/map.js
+++ b/src/map.js
@@ -1566,10 +1566,16 @@ var map = function (arg) {
    *    to get the results as a blob, which can be faster for some operations
    *    but is not supported as widely).
    * @param {Number} encoderOptions: see canvas.toDataURL.
+   * @param {object} opts: additional screenshot options:
+   *    background: if false or null, don't prefill the background.  If
+   *        undefined, use the default (white).  Otherwise, a css color or
+   *        CanvasRenderingContext2D.fillStyle to fill the initial canvas.
+   *        This could match the background of the browser page, for instance.
    * @returns {string|HTMLCanvasElement}: data URL with the result or the
    *    HTMLCanvasElement with the result.
    */
-  this.screenshot = function (layers, type, encoderOptions) {
+  this.screenshot = function (layers, type, encoderOptions, opts) {
+    opts = opts || {};
     // ensure layers is a list of all the layres we want to include
     if (!layers) {
       layers = m_this.layers();
@@ -1587,9 +1593,11 @@ var map = function (arg) {
     result.width = m_width;
     result.height = m_height;
     var context = result.getContext('2d');
-    // start with a white background
-    context.fillStyle = 'white';
-    context.fillRect(0, 0, result.width, result.height);
+    // optionally start with a white or custom background
+    if (opts.background !== false && opts.background !== null) {
+      context.fillStyle = opts.background !== undefined ? opts.background : 'white';
+      context.fillRect(0, 0, result.width, result.height);
+    }
     // for each layer, copy all canvases to our new canvas.  If we ever support
     // non-canvases, add them here.  It looks like some support could be added
     // with a library such as rasterizehtml (avialable on npm).
diff --git a/tests/cases/map.js b/tests/cases/map.js
index f5e6f0e761..a8dc491f20 100644
--- a/tests/cases/map.js
+++ b/tests/cases/map.js
@@ -623,6 +623,12 @@ describe('geo.core.map', function () {
       expect(dataUrl3).not.toEqual(dataUrl);
       expect(dataUrl3).not.toEqual(dataUrl2);
       layer2.opacity(1);
+      // we can ask for no or different backgrounds
+      dataUrl2 = m.screenshot(null, undefined, undefined, {background: false});
+      expect(dataUrl2).not.toEqual(dataUrl);
+      dataUrl3 = m.screenshot(null, undefined, undefined, {background: 'red'});
+      expect(dataUrl3).not.toEqual(dataUrl);
+      expect(dataUrl3).not.toEqual(dataUrl2);
       // asking for layers out of order shouldn't matter
       dataUrl3 = m.screenshot([layer2, layer1]);
       expect(dataUrl3).toEqual(dataUrl);