CODEWITHSUNDEEP
javascriptcanvasgojs
Shreya Shahi
Shreya Shahi

Reputation: 63

Can't find canvas element created inside div

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.

Upvotes: 3

Views: 1190

Answers (2)

Walter Northwoods
Walter Northwoods

Reputation: 4106

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.

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

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

Upvotes: 2

Related Questions