HTML canvas image download returning 'invalid object' in href

Question

I'm building an application that writes images from the Google Street View API to an HTML5 canvas based on user inputs, then allows users to download a jpeg of the canvas image.

The Street View image is writing to the canvas just fine, but when I try to download it using a link tag, the download fails. If I view the "#download" tag in the console, it shows that its href is set to an "invalid object." When I console log the toDataURL, it looks like a very long, but still syntactically correct, data URL, which should trigger the download.

I've tried several different approaches for downloading this canvas, and each results in a similar error. I've tried using different image types, opening the image in the browser, messing with the CORS permissions (which now seem to be working fine). Any idea what could be going wrong?

The function to download the canvas:

 downloadCanvas(canvasId, filename) {
        var link = document.getElementById('download');
        link.download = filename;
        link.href = document.getElementById(canvasId).toDataURL('image/jpeg').replace("image/jpeg", "image/octet-stream");
        console.log(link);
    }

  downloadCard(e) {

    e.preventDefault;
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();

    this.downloadCanvas('card-maker', 'postcard-front.png');
}

The trigger:

<a id="download">
            <button className="card-form-btn-active dwnld-btn"
            onclick="downloadCard(e);">
            Download postcard 
            </button>
   </a>