Created
August 16, 2019 13:41
-
-
Save jdmichaud/2642febd94d72859b2c1cb68a45ae4a3 to your computer and use it in GitHub Desktop.
Resizable viewport
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Resizable Canvas</title> | |
| <script type="text/javascript"> | |
| function main() { | |
| const viewport = document.getElementsByClassName('viewport')[0]; | |
| const resizeObserver = new ResizeObserver(entries => { | |
| entries.forEach(({ target, contentRect }) => { | |
| const canvas = target.children[0]; | |
| console.log(`resize canvas to ${contentRect.width}x${contentRect.height}`); | |
| canvas.width = contentRect.width; | |
| canvas.height = contentRect.height; | |
| }); | |
| }); | |
| resizeObserver.observe(viewport); | |
| const canvas = document.getElementsByTagName('canvas')[0]; | |
| canvas.addEventListener('mousedown', () => console.log('mousedown on canvas')) | |
| } | |
| window.onload = main; | |
| </script> | |
| <style type="text/css"> | |
| .viewport { | |
| border: 1px solid gray; | |
| resize: both; | |
| overflow: hidden; /* Has to be different from 'visible' for resize to work */ | |
| width: 512px; | |
| height: 512px; | |
| } | |
| canvas { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="viewport"> | |
| <canvas></canvas> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment