Can't find canvas element created inside div

Question

I'm trying to create a canvas element which does not show on UI and draw GoJS data to it

    const divElement: HTMLDivElement = document.createElement('div')
    divElement.id='pngCanvas';
    divElement.style.height='1000px';
    divElement.style.width='1000px';
    const floorNameData=JSON.parse(localStorage.getItem('floorNameArray'))
    const selectedFloor = floorNameData.find((item, index) => {
        return item.selected === true;
    });
    const mappedModelData=JSON.parse(localStorage.getItem('floorArray'))[selectedFloor.floorId]
    const fpInstance: Floorplan = new Floorplan(divElement);
    var virtualCanvas = document.querySelector('canvas');
    debugger
    fpInstance.model = go.Model.fromJson(mappedModelData);

GoJS draws a canvas element to assigned div, I see the canvas as innerHTML of div element. How to retrieve the canvas element and style so I can convert to png without showing in browser.

score 2 · Answer 1 · answered Dec 06 '19 at 10:51

He problem is that the div is not in the document, so document.querySelector('canvas') will return nothing since it looks in the document.

Change

var virtualCanvas = document.querySelector('canvas');

to

var virtualCanvas = divElement.querySelector('canvas');

score 1 · Accepted Answer · answered Dec 06 '19 at 20:52

1

You should not be depending on the existence of a Canvas element within the HTML DIV element. It is not part of the supported API, so you cannot depend on that.

Instead you should call Diagram.makeImage or Diagram.makeImageData. https://gojs.net/latest/api/symbols/Diagram.html#makeImage

Read more about rendering at: https://gojs.net/latest/intro/makingImages.html. Also consider: https://gojs.net/latest/intro/makingSVG.html.

answered Dec 06 '19 at 20:52

Walter Northwoods

4,061
2
10
16

But I don't have canvas at the moment, I want to make png from goJS json I have available. How to do that? – Shreya Shahi Dec 07 '19 at 11:20
1

If you do not want the user to see the diagram on the page, create a hidden DIV and its **Diagram**. Initialize the **Diagram**, including the model, and then call **Diagram.makeImage**. – Walter Northwoods Dec 08 '19 at 02:41

Can't find canvas element created inside div

2 Answers2