- From: Ken Russell via GitHub <sysbot+gh@w3.org>
- Date: Wed, 03 Jul 2019 19:05:11 +0000
- To: public-css-archive@w3.org
> ```
> <html>
> <body>
> <canvas id='canvas' style='width: 100%; height: 100%'> </canvas>
> <script>
> var canvas = document.getElementById('canvas');
>
> new ResizeObserver(entries => {
> var size = entries[0].devicePixelBorderBoxSize;
> canvas.width = size.width;
> canvas.height = size.height;
> var ctx = canvas.getContext('webgl');
> // init game engine/game/app logic here:
> initRendering(ctx);
> }).observe(canvas, { box: 'device-pixel-border-box' });
> </script>
> </body>
> </html>
> ```
>
> does the above work?
The game initialization logic should be factored out from the ResizeObserver, or at least, check to see if it's already been run before running it again. Ideally only resizing of the back buffer would be handled in the ResizeObserver's callback.
If this approach is documented, then in the same place it also needs to be documented that apps might want to run at lower resolution and could observe a different box via ResizeObserver for that purpose.
> Another question was how about if the JS code needs to be loaded dynamically?
...
> Does that work? I.e. will observing the resize cause an observe event to be fired on the next frame?
That's a good question. Per these docs:
https://drafts.csswg.org/resize-observer-1/
https://developers.google.com/web/updates/2016/10/resizeobserver
it looks like yes, if observation starts, the element is being rendered, and its size is greater than (0,0), the observer will fire. So the canvas can be placed in the page rather than needing to be dynamically created.
--
GitHub Notification of comment by kenrussell
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3554#issuecomment-508219156 using your GitHub account
Received on Wednesday, 3 July 2019 19:05:12 UTC