How to make canvas fill browser window

[alexpestov]

Hi,

I'm trying to make HTML5 canvas fill the whole browser window, but keep all the elements the same size.

Of course, I tried responsive scaling options in Publish settings, but none of them could help me with that.

I need canvas to fill the whole window, but the elements should stay the same size (I'll reposition them as I need).

I took the tutorial by Joseph Labrecque, his third source file "Responsive repositioning of elements". 

https://inflagrantedelicto.memoryspiral.com/2016/02/responsive-scaling-in-animate-cc/

That's exactly what I'm trying to do, but his canvas doesn't fill the whole window. 

I manually changed lib.properties in the .js file

lib.properties = {
id: 'E6A711C6D3714A758799092F7115FF77',
width: 700,
height: 188,

replaced width: 700 with window.innerWidth, and height: 188 with window.innerHeight

Here's the result, exactly what I'm looking for:

http://alexpestov.com/responsive-2/

But when I resize the window, nothing happens, because standrad resposive scaling is disabled and if I turn it on, the canvas will be scaling with the ratio. How do I make the canvas to fill the whole browser window without scaling the elements? Any way to do that once (in .hmtl) without editing the .js file manually each time? When Adobe gonna realise that we need that option in Publish settings?

Thanks

[ClayUUID]

How do I make the canvas to fill the whole browser window without scaling the elements? Any way to do that once (in .hmtl) without editing the .js file manually each time?

No. The so-called "responsive" mode in publish settings isn't responsive at all. It's just scaling. Animate has no native responsive functionality.

[JoãoCésar]

Hi.

If you just want to make your content responsive on desktop computers, then this code may help:

var root = this;

root.start = function()
{
	document.body.style.backgroundColor = lib.properties.color;
	root.stop();
	root.resizeHandler();
	window.addEventListener("resize", root.resizeHandler);
};

root.resizeRoot = function(e)
{
	var bounds = root.rec0.nominalBounds;
	var column1 = root.w * 0.5;
	var column2 = root.w - bounds.width * 0.5;
	var row1 = root.h * 0.5;
	var row2 = root.h - bounds.height * 0.5;
	
	root.rec1.x = column1;
	
	root.rec2.x = column2;
	
	root.rec3.y = row1;
	
	root.rec4.x = column1;
	root.rec4.y = row1;
	
	root.rec5.x = column2;
	root.rec5.y = row1;
	
	root.rec6.y = row2;
	
	root.rec7.x = column1;
	root.rec7.y = row2;
	
	root.rec8.x = column2;
	root.rec8.y = row2;
};

root.resizeCanvas = function(e)
{
	root.w = window.innerWidth;
	root.h = window.innerHeight;
	
	canvas.width = root.w;
	canvas.height = root.h;
	canvas.style.width = root.w + "px";
	canvas.style.height = root.h + "px";
	
	stage.tickOnUpdate = false;            
	stage.update();            
	stage.tickOnUpdate = true;
};

root.resizeHandler = function(e)
{
	root.resizeCanvas(e);
	root.resizeRoot(e);
};

root.start();

For this to work, you have to go to the Publish Settings and uncheck Center stage and Make responsive under JavaScript/HTML > Basic.

Demo:

http://bit.ly/36w0dRX

Code and files (FLA, JavaScript, HTML...):

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/responsive_ui

This won't work on mobile devices though.

I do have a code that I use on some personal projects that is able to make Animate CC content responsive in both desktop and mobile devices but I'm not 100% sure it will work on all screens and browsers.

Maybe @ClayUUID can help us out here with a code that will work flawlessly anywhere.

Regards,

JC

[Numinus67]

oops, wrong thread.
[[[thank you for the suggested code,  @JoãoCésar. it's certainly helpful, but i have some issues. first, with your code exactly as you have it into my project, all the rectangles disappear. they do seem to be there though, as the code is not broken. any idea what's going on there? 

next, it does seem to be working to scale the canvas, but only up. if i resize the browser smaller than the original canvas size, it appears to remain that original size, and scrollbars appear. any idea why it doesn't resize down?]]]

[zerhackelt]

This is very cool. Thank you! 

I'm curious about your code that may also work for mobile devices. 🙂