Полигон на Google maps портит холст при использовании html2canvas

Я пытался сделать «скриншот» карты, над которой я работаю, и, наконец, смог сделать это, используя комбинацию html2canvas и ответ из этого предыдущего сообщения SO.

Однако при рисовании полигонов или полилиний на карте (с помощью диспетчера рисования или google.карты.polygon) холст внезапно становится испорченным и не может быть экспортирован с помощью toDataURL (). Следующая ошибка возникает после успешного отображения холста (http удален из-за 2 ссылка max allowance):

Uncaught DOMException: не удалось выполнить ‘toDataURL’ на
‘HTMLCanvasElement’: испорченные полотна не могут быть экспортированы.
на объектах.onrendered (: / / 127.0.0.1 / code / WorkingCode.html: 188:31)
на объектах.опции.complete (: / / 127.0.0.1 / code / html2canvas.js: 2711: 15)
при запуске (: / / 127.0.0.1 / code / html2canvas.js: 2215: 17)
в HTMLImageElement.НВФ.onload (: / / 127.0.0.1 / code / html2canvas.js: 2352:7)

Я исследовал эту проблему Для и нет четкого ответа, почему это происходит! Я знаю, что «скриншот» с полигонами должен работать, потому что карта в вышеупомянутой ссылке ( также видна здесь в интернете ) может это сделать.

Разница между нашими двумя кодами не ясна, почему один будет работать, а другой нет, так как я использую тот же код.

Итак, я думаю, что у меня есть два вопроса A) Как насчет полигонов, окрашивающих холст (т. е. есть ли файл, который я должен искать заголовок CORS? B) почему один и тот же код работает в одном экземпляре и завершается неудачей в другом.

Некоторые предпосылки для моего кода:
1) я запускаю все локально через XAMPP server (apache) на windows.
2) карта генерируется через Google maps api, как и полигоны.
3) html2canvas.js находится в рабочей папке, в которой находится моя веб-страница.

Я прикрепляю некоторые соответствующие биты кода, так что, надеюсь, более ясно, что я делаю.

источники:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyAPIkey&libraries=geometry,drawing,places&callback=initAutoComplete"
async defer></script>
<script type="text/javascript" src="http://127.0.0.1/LawnCareMapping/html2canvas.js"
></script>

Скриншот

<button onclick="Calc()"></button>
function Calc(){

         //New Method from StackExchange solution
      //get transform value
      var transform=$('.gm-style>div:first>div').css('transform')
      var comp=transform.split(',') //split up the transform matrix
      var mapleft=parseFloat(comp[4]) //get left value
      var maptop=parseFloat(comp[5])  //get top value
      $('.gm-style>div:first>div').css({ //get the map container. not sure if stable
        'transform':'none',
        'left':mapleft,
        'top':maptop,
      });

      html2canvas($('#map'),
      {
        //proxy: "http://127.0.0.1/html2canvasproxy.php",
        useCORS: true,
        logging: true,
        onrendered: function(canvas)
        {
          var dataUrl= canvas.toDataURL();

          window.open (dataUrl);
          $('.gm-style>div:first>div').css({
            left:0,
            top:0,
            'transform':transform
          })
        }
      });
    };

Карта и полигоны

var location = new google.maps.LatLng(42.886273, -74.870589);
        map = new google.maps.Map(document.getElementById('map'), {
          center: location,
          zoom: 8,
          mapTypeId: 'hybrid',
          draggableCursor:"crosshair",
        });

Shape && Shape.setMap(null)
  Shape = new google.maps.Polygon({
    paths: Points,
    strokeColor:"#fff",
    strokeOpacity: .5,
    strokeWeight: 2,
    fillColor: "#fff",
    fillOpacity: .5,
    editable: !0,
    clickable: false
  });
plowShape[plowCoordInd].setMap(map);

РЕДАКТИРОВАТЬ:

Я удалил свою ссылку на сайт.