How do I resize a canvas when entering fullscreen with canvas.requestFullscreen()? How do I resize a canvas when entering fullscreen with canvas.requestFullscreen()? dart dart

How do I resize a canvas when entering fullscreen with canvas.requestFullscreen()?


Just take the window size in your callback:

canvas.width = window.innerWidth; // Or window.screen.available.widthcanvas.height = window.innerHeight;canvas.style.position = 'absolute'; // If you need


You could try this

:-webkit-full-screen #CanvasElement {  width: 100%;  height: 100%;}

as suggested here


I used this:

original_width = canvas.width;original_height = canvas.height;canvas.onFullscreenChange.listen( (t){  if( canvas == document.fullscreenElement ){    canvas.width = window.screen.width;    canvas.height = window.screen.height;  }  else{    canvas.width = original_width;    canvas.height = original_height;  }} );

document.fullscreenElement returns the element currently in fullscreen, and is used to restore the size when exiting the fullscreen again.

window.screen.height returns the full screen height, while window.screen.available.height returns the screen height, excluding the space reserved for taskbars and similar in your desktop environment. Do not use the latter, nor many of the solutions like document.body.clientHeight, canvas.offsetHeight, etc. you find around the web, they will not give the size you want.