How to make canvas fill browser window

Explorer ,
Jan 27, 2020 Jan 27, 2020

Copy link to clipboard

Copied

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". 
 
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:
 
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
TOPICS
Code , How to

Views

496

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 27, 2020 Jan 27, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 28, 2020 Jan 28, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Feb 27, 2020 Feb 27, 2020

Copy link to clipboard

Copied

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?]]]

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

LATEST

This is very cool. Thank you! 

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines