Leaflet Map Capturing using HTML2Canvas

Question

I'm trying to capture my Leaflet Map as an image using HTML2canvas, and Then append the captured image to a new Div. The map is captured Successfully, BUT NO markers are shown on the Captured Image!! Sometimes i got part of the icons shown on the captures map. Here is my code:

<apex:includeScript value="{!URLFOR($Resource.Leaflet, 'leaflet.js')}" /> 
<apex:includeScript value="{!URLFOR($Resource.Leaflet, 'leaflet-src.js')}" />
<apex:includeScript value="{!URLFOR($Resource.Leaflet, 'html2canvas.js')}" />
<apex:includeScript value="{!URLFOR($Resource.Leaflet, 'html2canvas.svg.js')}" />
<apex:includeScript value="{!URLFOR($Resource.Leaflet, 'leaflet-image.js')}" />
<apex:includeScript value="https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js"/>
<apex:includeScript value="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js"/>


......
......

<script>
    

  var j$ = jQuery.noConflict();
  L_PREFER_CANVAS=true;


  var snapshot = j$("[id$=snapshot]");
  var htmlMap = j$("[id$=mapDiv]");
  button=j$("[id$=snap]");
 

  //This function is called via an apex:commandButton
  function doImage(err,canvas){

    htmlMap = j$("[id$=mapDiv]");
    html2canvas(htmlMap, 
                {
      // proxy: "server.js",
      useCORS: true,
      preferCanvas: true,
      onrendered: function(canvas) 
      {

        var img = canvas.toDataURL("image/png");
        var image=new Image();

        image.setAttribute("src",img);

        console.log(image);
        j$("[id$=snapshot]")[0].appendChild(image);
      }
    });

  }
 
  </script>

Here is My origional Map: Origional Map

and This is What I got when taking a snapshot

another snapshot

any Ideas??

Thanks