How to make canvas fill browser window

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

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.