Estoy tratando de imprimir un lienzo en un archivo PDF que estoy creando. El problema es que siempre obtengo un rectángulo negro en mi PDF en lugar del gráfico que puedo ver en mi página web.

Genero el lienzo así:

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

Está lleno por 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); } }

Luego lo exporto a un archivo PDF:

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

Después de descargar el archivo, aparece un rectángulo negro en mi PDF con las dimensiones de mi lienzo.

¿Qué hago mal?