Burn Annotations to an Image Client-Side with Document Viewer - HTML5 JavaScript

let documentViewer = null;  

createDocumentViewer = () => { 
   // Initialize the user interface 
   const interactiveSelect = document.getElementById("interactiveSelect"); 
    
   const panZoomOption = document.createElement("option"); 
   panZoomOption.innerHTML = "Pan / Zoom"; 
   panZoomOption.value = lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom; 
   interactiveSelect.appendChild(panZoomOption); 
    
   const textOption = document.createElement("option"); 
   textOption.value = lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText; 
   textOption.innerHTML = "Select Text"; 
   interactiveSelect.appendChild(textOption); 
    
   interactiveSelect.onchange = (e) => documentViewer.commands.run(e.target.value, null); 
    
   const annotationsSelect = document.getElementById("annotationsSelect"); 
    
   const annSelectOption = document.createElement("option"); 
   annSelectOption.innerHTML = "Select Annotations"; 
   annSelectOption.value = lt.Annotations.Engine.AnnObject.selectObjectId.toString(); 
   annotationsSelect.appendChild(annSelectOption); 
    
   const annLineOption = document.createElement("option"); 
   annLineOption.innerHTML = "Line Object"; 
   annLineOption.value = lt.Annotations.Engine.AnnObject.lineObjectId.toString(); 
   annotationsSelect.appendChild(annLineOption); 
    
   const annRectOption = document.createElement("option"); 
   annRectOption.innerHTML = "Rectangle Object"; 
   annRectOption.value = lt.Annotations.Engine.AnnObject.rectangleObjectId.toString(); 
   annotationsSelect.appendChild(annRectOption); 
    
   annotationsSelect.onchange = (e) => { 
         const value = +e.currentTarget.value; 
         documentViewer.annotations.automationManager.currentObjectId = value; 
   } 
    
   // Init the document viewer, pass along the panels 
   const createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions(); 
   // We are not going to use elements mode in this example 
   createOptions.viewCreateOptions.useElements = false; 
   createOptions.thumbnailsCreateOptions.useElements = false; 
    
   // The middle panel for the view 
   createOptions.viewContainer = document.getElementById("viewer"); 
   // The left panel for the thumbnails 
   createOptions.thumbnailsContainer = document.getElementById("thumbnails"); 
   // The right panel for the bookmarks 
   createOptions.bookmarksContainer = document.getElementById("bookmarks"); 
   createOptions.useAnnotations = true; 
    
   // Create the document viewer 
   documentViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions); 
    
   // We prefer SVG viewing 
   documentViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.svg; 
    
   // TODO: Enable AutoCreateCanvas 
   documentViewer.view.imageViewer.autoCreateCanvas = true; 
 
   // Create html5 rendering engine 
   documentViewer.annotations.automationManager.renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
 
   // Initialize documentViewer annotations 
   documentViewer.annotations.initialize(); 
    
   documentViewer.annotations.automationManager.currentObjectIdChanged.add(function (sender, e) { 
         // When done drawing, the manager will return to the select object; so we need to force the annotationsSelect element to return to the select object option 
         annotationsSelect.value = sender.currentObjectId; 
   }); 
    
   this.loadDefaultDoc(documentViewer, interactiveSelect) 
} 

$("#burnAnnotations").click(function(){ 
    const imageCanvas = documentViewer.view.imageViewer.activeItem.canvas; 
    const context = imageCanvas.getContext('2d'); 
    const renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine(); 
    renderingEngine.resources = documentViewer.annotations.automationManager.resources; 
    renderingEngine.renderers = documentViewer.annotations.automationManager.renderingEngine.renderers; 
    renderingEngine.attach(documentViewer.annotations.automationManager.automations.get_item(0).container, context); 
    if (renderingEngine != null) { 
        const imageRes = documentViewer.view.imageViewer.imageResolution; 
        renderingEngine.burnToRectWithDpi(lt.LeadRectD.empty, imageRes.width, imageRes.height, imageRes.width, imageRes.width, imageRes.height); 
        documentViewer.annotations.automation.selectObjects(documentViewer.annotations.automation.container.children); //select annotations in container 
        documentViewer.annotations.automation.deleteSelectedObjects(); //delete annotations 
        documentViewer.annotations.automation.invalidate(lt.LeadRectD.empty); //only burned (rasterzied) pixels remain 
            
    } 
});