Add options for the background of the screenshot.

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).

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);