Screenshots and resolutions

Hi everyone, I have a question about the size of the canvas and its resolution.
So I need to make a screenshot of the canvas and getScreenshot() is working fine, but I want to make an image with some standard resolution like 1000px x 1000px. I’ve already tried making container position absolute and setting its width and height to desirable values. And its working on display with resolution 2560 x 1440 but for some reason when testing on laptop or mobile clients (or responsive design in browser’s devtools), attributes “width” and “height” of canvas element scale to different sizes than the container and it looks like this

<canvas id="canvas" data-engine="three.js r149" width="2000" height="2000" style="width: 1000px; height: 1000px; display: inherit;"></canvas>

If I set width and height attributes of the canvas element right before taking the screenshot, then it produces the image of the right resolution but because it just scales canvas without redrawing viewport it produces wrong image (not centered and just some part of the object, also calling viewport.update() after changing size doesn’t help).
So what options do I have if I want to get screenshot of a set resolution? Thanks.

Hello @Ihor

this issue here is that the viewer does not render in the size of the screen, but a maximum of 1920x1080 and upsamples the results. With the setting
maximumRenderingSize (available from 2.7.0 on), you can adjust that maximum yourself. This should solve the issue with there being different sizes.

Cheers, Michael

Hi @MajorMeerkatThe3rd . Thanks for the update. Unfortunately even after setting viewport.maximumRenderingSize.width and viewport.maximumRenderingSize.height I still have this problem when using mobile devices (on main monitor with resolution 2560 x 1440 it works fine).
So if I load the page in responsive design in browser’s devtools or on my mobile or even mac laptop it will multiply width and height attributes of canvas element by some factor (ranging from 2 to 4 from what Ive seen) .

In this case it multiplies by 3.5 if I choose Galaxy S20 in devtools. So setting maximumRenderingSize to 1000 in this case prevents it from going over 3500px but not 1000px as expected. And when taking screenshot it will take these attributes values to set the image resolution. I also see this behaviour on the shapediver site.
So I’m still looking for all options posible to resolve this issue. Thanks.

Hello @Ihor

did you take into account the devicePixelRatio? This might be the multiplication factor you were mentioning.

Besides that, you always have the option to resize the viewport yourself. Please see the code comment about the automaticResizing property.

Cheers, Michael

Hi @MajorMeerkatThe3rd . Thanks for pointing me to devicePixelRatio article. That was exactly the scale factor that has been used to determine the canvas size. A little bit hacky but the issue is fixed now, so thanks again for your help.

1 Like