title: leaflet+canvg+html2canvas = MyImage.png
body: <p>Good day my dear friends. I want to create png file from lealfet map. I use html2canvas library, and leaflet map tiles and other elemets converts to png greatfully, but not svg-elements(offsets). I know, that there is some code to redraw all svg elements to canvas(  </p>
  
  <pre><code>var canvas = L.canvas();
  var map = new L.Map('map', {layers: [osm], preferCanvas: true}); 
  </code></pre>
  
  <p>but this is bad way for me, because, when I change extend all svg element flickers...</p>
  
  <p>So...How can I using CANVG convert leaflet svg polygons to canvas? this is my control to create png whith offsets of svg elements</p>
  
  <pre><code>&lt;script&gt;
      var CustomControl = L.Control.extend({
              options: {
                  position: 'bottomright'
              },
              onAdd: function (map) {
                  var container = L.DomUtil.create('div', 'leaflet-control-custom');
                  L.DomEvent.addListener(container, 'click', this._clicked,this);
                  return container;
              },
  
              _clicked: function(e){
                  e.preventDefault();
                  window.jQuery(".leaflet-control-container").attr("data-html2canvas-ignore", "true");
  
                  html2canvas(window.jQuery('#map'), {
                      allowTaint : false,
                      logging : true,
                      taintTest: false,
                      useCORS: true,
                      onrendered: function(canvas) { 
                          // canvas is the final rendered &lt;canvas&gt; element
  
                          var myImage = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                          var link = document.createElement('a');
                          if(link.download !== undefined){
                              link.download = "test.png";
                              link.href = myImage;                     
                              document.body.appendChild(link);
                              window.jQuery(link).css("display", "none");
                              link.click();
                              document.body.removeChild(link);
                          }else{
                              alert('WTF!!!')
                          }
                      }
                  });
              }
          });
      map.addControl(new CustomControl());
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="leaflet-pane leaflet-overlay-pane"&gt;
      &lt;svg pointer-events="none" class="leaflet-zoom-animated" width="1559" height="960" viewBox="-45 -861 1559 960" style="transform: translate3d(-45px, -861px, 0px);"&gt;
      &lt;g&gt;
      &lt;path class="leaflet-interactive" stroke="#000000" stroke-opacity="1" stroke-width="1.04" stroke-linecap="round" stroke-linejoin="round" fill="#b6f666" fill-opacity="0.5" fill-rule="evenodd" pointer-events="visiblePainted" d="M787 -563L821 -569L826 -573L829 -578L843 -585L858 -583L862 -581L865 -572L874 -564L883 -545L894 -540L896 -537L892 -525L891 -507L888 -498L880 -496L877 -493L875 -486L857 -481L852 -482L848 -488L844 -489L832 -483L828 -479L824 -478L814 -482L797 -485L788 -485L782 -482L766 -481L759 -497L753 -502L742 -505L734 -511L733 -517L738 -544L745 -557L756 -558z"&gt;&lt;/path&gt;
      &lt;path class="leaflet-interactive" stroke="#000000" stroke-opacity="1" stroke-width="1.04" stroke-linecap="round" stroke-linejoin="round" fill="#b6f666" fill-opacity="0.5" fill-rule="evenodd" pointer-events="visiblePainted" d="M904 -689L884 -693L881 -702L888 -713L920 -734L924 -740L929 -739L934 -734L940 -717L951 -698L956 -675L961 -661L965 -639L962 -637L956 -637L953 -641L950 -658L948 -664L945 -666L938 -664L935 -660L925 -661L905 -668L906 -681L910 -681L912 -685L908 -690z"&gt;&lt;/path&gt;
      &lt;/g&gt;
      &lt;/svg&gt;&lt;/div&gt;
  </code></pre>