Autodesk Forge Viewer Api Cannot load markups inside screenshot

Good day,

I am using the latest Autodesk forge viewer and I am trying to take a screenshot that also renders my markups. Right now my code takes a screenshot without any markups. Below is my viewer code. I am loading markups Core and markups Gui extensions. Notice the “takeSnapshot(viewer)” function inside onDocumentLoadSuccess(viewerDocument). The function is defined right before the initializer function.

function takeSnapshot(target){
$('#snipViewer').click( () => { target.getScreenShot(1600, 920, (blobURL) => { let snip = blobURL;$('#sniplink').attr("href", snip);
$('#sniplink').html('Not Empty');$('#sniplink').css({"background-image": url(${blobURL})}); }); }); } //Autodesk Viewer Code instance.data.showViewer = function showViewer(viewerAccessToken, viewerUrn){ localStorage.setItem("viewerAccessTokentoken", viewerAccessToken); localStorage.setItem("viewerUrn", viewerUrn); var viewer; var options = { env: 'AutodeskProduction', api: 'derivativeV2', getAccessToken: function(onTokenReady) { var token = viewerAccessToken; var timeInSeconds = 3600; onTokenReady(token, timeInSeconds); } }; Autodesk.Viewing.Initializer(options, function() { let htmlDiv = document.getElementById('forgeViewer'); viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv); let startedCode = viewer.start(); viewer.setTheme("light-theme"); viewer.loadExtension("Autodesk.CustomDocumentBrowser").then(() => { viewer.loadExtension("Autodesk.Viewing.MarkupsCore"); viewer.loadExtension("Autodesk.Viewing.MarkupsGui"); }); if (startedCode > 0) { console.error('Failed to create a Viewer: WebGL not supported.');$("#loadingStatus").html("Failed to create a Viewer: WebGL not supported.");
return;
}
});
var documentId = urn: + viewerUrn;
var derivativeId = urn: + instance.derivativeUrn;
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
takeSnapshot(viewer);
}
console.error('Failed fetching Forge manifest');
}
}


I have tried doing this method but the instructions are very unclear for me. <div style="width:49vw; height:100vh;display:inline-block;"><canvas id="snapshot" style="position:absolute;"></canvas><button onclick="snaphot();" style="position:absolute;">Snapshot!</button></div>

What is the canvas element here for? Am I supposed to renderToCanvas() when I load the markups extension inside the initialize function or in my screenshot function? Is there some way I can implement the renderToCanvas() without changing too much of what I already am using here? I am not an expert with the viewer API so please if you could help me it would be very much appreciated, I am a beginner please don’t skip many steps.

Thank you very much!