Partly blacked out canvas when using html2canvas on a div that displays a ngx-graph

Question

I'm using ngx-graph for angular to display something graphic. Since theres no direct feature to download the graphic I looked around and found people using ngx-charts and html2canvas to generate a downloadable canvas of their charts.

Now I'm trying to use html2canvas to generate a downloadable canvas of my graph, but the canvas generated by html2canvas blacks out some of the content of my graph.

1) parts of the Node Blocks Text is missing

2) the lines linkings the Nodes are missing while the arrow-tips are visible.

How the div looks like

How the canvas from html2canvas looks like

Code from my ngx-graph implementation:

<div id="graph" #graph>
  <ngx-graph class="chart-container" [links]="links" [nodes]="nodes" [legend]="false" [draggingEnabled]="false">

    <ng-template #defsTemplate>
      <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto" fill="white">
        <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
      </svg:marker>
    </ng-template>

    <ng-template #nodeTemplate let-node>
      <svg:g class="node">
        <svg:rect [attr.width]="node.dimension.width" [attr.height]="node.dimension.height" fill="white"/>
        <svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">{{node.label}}
        </svg:text>
      </svg:g>
    </ng-template>

    <ng-template #linkTemplate let-link>
      <svg:g class="edge">
        <svg:path class="line" stroke-width="3" marker-end="url(#arrow)">
        </svg:path>
      </svg:g>
    </ng-template>

  </ngx-graph>
</div>

<button mat-button (click)="downloadAsPicture()" [disabled]="false">
  <mat-icon>cloud_download</mat-icon><span>Download as .png</span>
</button>

Code from my html2canvas implementation:

downloadAsPicture() {
    html2canvas(document.getElementById("graph"), {height: 500})
    .then(function(canvas){
      var imgURL = canvas.toDataURL("image/png");
      var dlLink = document.createElement('a');
      dlLink.download = "image";
      dlLink.href = imgURL;
      dlLink.dataset.downloadurl = ["image/png", dlLink.download,   dlLink.href].join(':');

      document.body.appendChild(dlLink);
      dlLink.click();
      document.body.removeChild(dlLink);
      canvas.remove;
    });

I appreciate any help, also including alternatives to ngx-graph where what I'm trying to achieve may be more straightforward.

Thank you very much.