title: html2canvas captures everything except the content of an inner canvas
body: <p>I've got a map rendered by means of <code>leaflet</code>. </p>
  
  <p>I need to make a screenshot of that map by using <code>html2canvas</code>.</p>
  
  <p>To make use of <code>html2canvas</code>, I need to provide a DOM element to capture (<code>elementToCapture</code>) and an optional configuration (<code>html2canvasConfiguration</code>). </p>
  
  <pre><code>var html2canvasConfiguration = {
      useCORS: true,
      width: map._size.x,
      height: map._size.y,
      backgroundColor: null,
      logging: true,
      imageTimeout: 0
  };
  
  var elementToCapture = map._container.getElementsByClassName('leaflet-pane leaflet-map-pane')[0];
  html2canvas(elementToCapture, html2canvasConfiguration).then(function (canvas) {
      var link = document.createElement('a');
      link.download = 'test.png';
      link.href = canvas.toDataURL();
      link.click();
      link.remove();
  })
  </code></pre>
  
  <p>I extract an element by the <code>leaflet-pane leaflet-map-pane</code> class, which basically represents the whole map including controls (zoom in/out buttons, scale, etc), custom markers, tooltips, overlays, popups.</p>
  
  <p>The entire DOM looks like</p>
  
  <pre><code>&lt;div class="leaflet-pane leaflet-map-pane"&gt;
      &lt;div class="leaflet-pane leaflet-tile-pane"&gt;
          &lt;div class="leaflet-gl-layer mapboxgl-map"&gt;
              &lt;div class="mapboxgl-canvas-container"&gt;
                  &lt;canvas class="mapboxgl-canvas leaflet-image-layer leaflet-zoom-animated"&gt;&lt;/canvas&gt;
              &lt;/div&gt;
              &lt;div class="mapboxgl-control-container"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="leaflet-pane leaflet-shadow-pane"&gt;&lt;/div&gt;
      &lt;div class="leaflet-pane leaflet-overlay-pane"&gt;&lt;/div&gt;
      &lt;div class="leaflet-pane leaflet-marker-pane"&gt;&lt;/div&gt;
      &lt;div class="leaflet-pane leaflet-tooltip-pane"&gt;&lt;/div&gt;
      &lt;div class="leaflet-pane leaflet-popup-pane"&gt;&lt;/div&gt;
  &lt;div class="leaflet-control-container"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The problem I've faced is the <code>leaflet-pane leaflet-tile-pane</code> element (particularly the content of the inner <code>canvas</code>) doesn't get captured by <code>html2canvas</code>. To put it simply, I see everything <em>on</em> the map, but I don't see the map <em>itself</em>.</p>
  
  <p><a href="https://i.stack.imgur.com/tCjbG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tCjbG.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/1AvFH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1AvFH.png" alt="enter image description here"></a></p>
  
  <p><strong>UPDATE 1:</strong> </p>
  
  <p>The version I am currently using is <code>1.0.0-rc.1</code> (the latest one).</p>
  
  <p><strong>UPDATE 2:</strong></p>
  
  <p>The nature of the canvas is <code>webgl</code>. Might it be the issue? According to <a href="https://github.com/niklasvh/html2canvas/issues/1420" rel="nofollow noreferrer">this</a>, they do support <code>webgl</code> canvases.</p>
  
  <p><strong>UPDATE 3:</strong></p>
  
  <p>I tried to obtain the canvas programmatically and call <code>toDataURL</code> on it. It resulted in an empty screenshot, even with the <code>preserveDrawingBuffer</code> hack.</p>
  
  <p><strong>UPDATE 4:</strong></p>
  
  <p>Oddly enough, it doesn't capture only certain canvases. I've created a <code>2d</code> canvas (by adding <code>preferCanvas</code> to map configuration) and it got shown.</p>