[HTML5 Canvas] How to scale stage?

[Aaron Beall]

Hi,

I have an animation created in an HTML5 Canvas document. When viewed in the browser it is displayed at the document size, which is not suprising, but what I want to do is display it at full window size, scaled to fit. Basically I'm looking for the equivalent to AS3 scaleMode and align with the SWF set to 100% width and height. The publish settings don't have any options related to scaling, so I'm not sure where to look. How should I do this?

Thanks!

-Aaron

[kglad]

just edit the html file.

make sure to untick the overwrite html option in the publish settings unless you want to repeatedly edit the html file.

[Aaron Beall]

What should I edit in the HTML file? The <canvas> element doesn't seem to like percent widths. I've added a resize handler to set the canvas width/height to window.innerWidth and innerHeight, but the actual canvas drawings are not scaled.

I looked at the CreateJS Stage documentation and it doesn't seem to have a scaleMode or align property like AS3 Stage. It does have scaleX and scaleY... I guess I need to manually figure out what the scaleX and scaleY are?

[Aaron Beall]

Well, this is what I came up with:

window.addEventListener("resize", resize);

    function resize(){

	// determine the screen scale factor
	var scaleX = window.innerWidth / lib.properties.width;
	var scaleY = window.innerHeight / lib.properties.height;
	// use the lesser scale to fit the entire canvas on screen
	var scale = Math.min(scaleX, scaleY);
	console.log("scale:", scaleX, scaleY, scale);
	// scale the canvas to fit the window
	stage.canvas.width = lib.properties.width * scale;
	stage.canvas.height = lib.properties.height * scale;
	// scale the stage drawings to fill the canvas
	stage.scaleX = scale;
	stage.scaleY = scale;
	// center the canvas
	stage.canvas.style.left = ((window.innerWidth - stage.canvas.width) / 2) + "px";
	stage.canvas.style.top = ((window.innerHeight - stage.canvas.height) / 2) + "px";

    }

    resize();

(Sorry for the unformatted code, the code highlight feature is completely bugging out on me.)

Quite a bit of code compared to AS3, but it works.

-Aaron

[kglad]

except for the resizing which requires a resize listener, you can use:

<style>

#canvas{

    width: 100%;

    height: 100%;

}

</style>

[Aaron Beall]

Cool, nice tip.

BTW, at what point is your brain going to be full?? You've been answering my questions literally since I started using Flash MX about 10 years ago! Cheers.

-Aaron

[kglad]

if i keep learning stuff for long enough, i may get smart.  at least, i keep hoping...

[arlinh39963375]

Hello!

I'm using the solution you worked out here and it works wonderfully. But I can't seem to get the height fixed correctly. Scroll bars appear to show the remaining content and I'd like it to be fixed just like the width is. Any ideas?

Thanks!

ALH

[kglad]

you can use overflow:hidden to prevent scrollbars from appearing

[arlinh39963375]

YES! That works. Thank you. (Hopefully) last question. When I place that overflow:hidden command in the css, it cuts off some of the content on the lower half of the stage/canvas. Does that have to do with the original size of the stage in Animate CC or is there something else I need to do to get that content to fix to the lower half of the stage as I placed it in Animate CC?

THANK YOU SO MUCH!

ALH

[kglad]

the css in message 4 specifies that the canvas is displayed and nothing below that.  if you want some other div to be displayed, reference it instead of #canvas.

[arlinh39963375]

Regarding the below css coding:

------------------

<style>

#canvas{

    width: 100%;

    height: 100%;

}

</style>

-------------------

I know you stated that it should show only that which is in the canvas. But for some reason, while the width is fixed just fine, the height of the animate cc html5 canvas requires scrolling to see the entirety of. I'm not understanding what I'm missing. Any ideas?

Thanks!

[kglad]

if you have other styling or scaling code they may override that width/height sizing.

[arlinh39963375]

And then I guess I do have a couple more questions (sorry)

1. How do I prevent certain elements from scaling within the canvas (i.e, text & certain images because they look really fuzzy)?
2. How do I set a minimum width and/or height for the animation itself?

Thanks again!!

ALH

[arlinh39963375]

LAST ONE. lol

If I do want the text to scale, how do I do it but preserve the resolution? a good example of precisely what I'm trying to accomplish would be a site like: www.jasonbournemovie.com

Thanks!!

ALH

[kglad]

you'll need to use dynamic sizing to scale some but not all objects and to set minimum width and height.

for objects (including text) to scale without aliasing problems they need to be vectors, not bitmaps or text.

[arlinh39963375]

Ok. Could you provide me with a simple coding example to achieve dynamic scaling and setting minimum width and height, please? Thanks a million.

ALH

[kglad]

that's a topic not easy to handle via a forum.  i'd recommend googling a tutorial.

[arlinh39963375]

Will do. Thanks for all your help!

[kglad]

you're welcome.

[jørgenf80606748]

Hey is the a way to make the home page center ? and padding the same as the home page backgrund ??? and maybe remove the scroll bars ?

thx in advance

[UDESCO · Accepted solution]

Hi All,

Responsive scaling options are now a part of HTML5 canvas Publish settings in the latest release of Animate CC (2015.2)

See here: New Feature Summary (June and August 2016)

Creating HTML5 Ads with Animate CC: Responsive Canvas Scaling | Adobe Animate Team Blog

Update your copy of Animate via the Creative Cloud App and try it out now!