Load diagram onto HTML canvas

GoJS
1

I am trying to put a diagram onto a HTML canvas. Here’s my code:

var blob = gDiagramPV.makeImageData
var url = window.URL.createObjectURL(blob);

const canvas = document.getElementById('downloadCanvas');
const ctx = canvas.getContext('2d')

ctx.font="30px Arial"
ctx.fillText("Test Text",200,300)

let pvImage = new Image()

pvImage.onLoad = function() {
    ctx.drawImage(pvImage,1,1,100,100)  
}
pvImage.src = url

// download
var image = canvas.toDataURL();
var aDownloadLink = document.createElement('a');
aDownloadLink.download = 'canvas_image.png';
aDownloadLink.href = image;
aDownloadLink.click();

It’s not working. Can you provide some advice. The text appears, but not the diagram

2

First, I should point out that Diagram.makeImageData is a method, so you have to call it. But maybe you left out that from your code quote.

Second, I’m not sure there’s an “onLoad” event handler property on HTMLImageElement. The “onload” event happens when the DOM has finished loading.

Third, you are downloading the image before the image loaded event has happened.

I suggest you use the “callback” option of the options to the Diagram.makeImageData call: DiagramRendererOptions | GoJS API
and do all of your rendering during that callback function call.

3

Thanks Walter. I sorted it out