Canvas object after createViewer call

Hello,

Sorry for my noob question regarding the canvas (no experience with it and ShapeDiver API).

I’m trying here https://codepen.io/nekhbet/pen/LYQNLPq to put a static background image (so we can take a “screenshot” with our model in a fixed environment).

The issue is that if I disable the ShapeDiver viewer init (line 2 is “if (0) {”) and I click the “test” button, the image is loaded on the canvas. But, if I let the viewer to load, the “test” button clicking throws an error as the “2d” context is not defined. I looked over HTMLCanvasElement.getContext() - Web APIs | MDN for all the possible values of getContext and tried them all without luck).

Any help?

Thank you!

The first two paragraphs on the documentation page you referenced (HTMLCanvasElement.getContext() - Web APIs | MDN) explain the reason: It’s not possible to get two different types of context for a single canvas.

Is this what you are trying to do? https://codepen.io/ShapeDiver/pen/xxYEWBm

You can play with the background image properties: CSS background-image property

Ahh, yes. But I thought if I match the existing context I can interact with it.

Yes, exactly like that but via the canvas so I can then save it to a PNG using HTMLCanvasElement.toBlob() - Web APIs | MDN