I'm trying to print a canvas in a PDF file that I'm creating. The issue is that I always get a black rectangle in my PDF instead of the graph that I can see on my web page.

I generate the canvas like this:

<div class="col-md-6 featurePanel" style="display: none;">
    <div id="canvasContainer_@featureID"></div>
</div>

It's filled by JS:

function SetFeatureValues(measID, measIndex, measCount, featureID, canvasID, name, humL, humR, femL, femR, thor, lumb, reference, type, color, ResTable) {

    if (ResTable.length == measCount) {
        var element = document.createElement("canvas");
        element.id = canvasID;
        element.classList.add("ThreeDDogGraph");
        document.getElementById('canvasContainer_' + featureID).appendChild(element);
        _3ddogvis.scene(0.0, true, ResTable, canvasID);
    }
}

Then I export it to a PDF file:

function RenderFeature(pdf, currentTopPosition, currentLeftPasition, canvas) {    
    var newCanvas = document.createElement('canvas');
    let context = newCanvas.getContext('2d');
    newCanvas.width = width;
    newCanvas.height = height;
    context.drawImage(document.querySelector('#' + canvas.id), 0, 0, width, height);
    var newCanvasImg = newCanvas.toDataURL("image/png");

    pdf.addImage(newCanvasImg, 'png', currentLeftPasition, currentTopPosition, graphWidth, graphHeight, undefined, 'FAST');

}

After downloading the file I get a black rectangle in my PDF with the dimensions of my canvas.

What do I do wrong?