Downscaling a texture then upscaling a canvas.

[pongstylin]

Is information / quality lost when you downscale a high resolution image in a scene and then increase the scale of the canvas element?  In other words, is this effectively upscaling AFTER downscaling the image, or is the image effectively downscaled less?  The latter would be expected to have better quality than the former.  And it appears that the former is happening.

If quality is lost, is there a better way to be responsive and fill the window as far as possible while maintaining aspect ratio?  Ideally, I wouldn't want to rescale the coordinate system - the renderer width and height.

[pongstylin]

I haven't seen any replies, so I'll just answer it myself now that I have it figured.  Basically the answer is yes.  When you render to a canvas, you are essentially creating an image.  When you scale up the canvas by applying CSS width, height, or transforms, you are stretching the image, which does NOT take advantage of the high resolution textures.  So increasing the size of the canvas is your only option.  Then you can scale up the stage to match the larger sized canvas rather than messing with the positioning and sizes of all the objects on the stage.  So, in all, it doesn't take much to achieve responsive canvas sizes with best quality even if it can't be pure CSS.

This same concept can be applied to reduced scale scenarios as well.  Using CSS to shrink the canvas is an option since you don't have to worry about lost information.  But if you want to use mipmaps, for example, then it might be best to just size down the canvas and scale down the stage to match.  I speculate that this would improve performance on smaller screens (and lower powered devices) anyway.

The main usefulness in applying CSS size constraints on your canvas is when the user is actively shrinking or stretching the window.  Many resize events being fired in rapid succession and acting upon them to resize the canvas and rerender the canvas can be resource-intensive.  So, you might impose a slight delay between resizing a window and resizing and rerendering the canvas and that delay is reset if another window resize event happens first.

There are exceptions, however.  You might want to render larger canvas sizes than you need regardless to allow pinch-to-zoom to smoothly increase the size of the canvas at best quality throughout.  This might be good for scenes that aren't heavily animated such as maps.

Edited September 4, 2022 by pongstylin