Polygon on google maps taints canvas when using html2canvas

Question

I have been trying to take a "screenshot" of a map I am working on and was finally able to do it by using a combination of html2canvas and the answer from this previous SO post.

However, when drawing polygons or polylines on the map (either using drawing manager or google.maps.polygon) the canvas suddenly becomes tainted and can't be exported using toDataURL(). The following error is produced following a successful canvas render (http removed due to 2 link max allowance):

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at Object.onrendered (://127.0.0.1/code/WorkingCode.html:188:31) at Object.options.complete (://127.0.0.1/code/html2canvas.js:2711:15) at start (://127.0.0.1/code/html2canvas.js:2215:17) at HTMLImageElement.img.onload (://127.0.0.1/code/html2canvas.js:2352:7)

I have researched this problem for and there is no clear answer why this happens! I know the "screenshot" with polygons should work because the map in the aforementioned link (also seen here on the web) is able to do it.

The difference between our two codes is not clear as to why one would work while the other would not, as I am using the same code.

So I guess I have two questions A) What about the polygons taints the canvas (i.e. is there a file that i should look for a CORS header? B) Why does the same code work in one instance and fail in another.

Some background on my code: 1) I am running everything locally through Xampp server (apache) on windows. 2) The map is generated through google maps api as are the polygons. 3) The html2canvas.js is located in the working folder that my webpage is in.

I am attaching some relevant bits of code so that it is hopefully more clear what I am doing.

sources:

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

Screenshot

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

Map and polygons

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

EDIT:

I have removed my website link.

Answer 1

I figured it out.

The issue was due to markers on the map! I had used markers for my search box and I also had a custom marker to indicate a point of interest.

Once I removed the two markers the tainted issue went away and I am able to add polygons now!

To remedy the markers, I am just using custom markers that I upload to my server.