Skip to main content
A
Aaron Beall
Inspiring
April 17, 2015
Answered

[HTML5 Canvas] How to scale stage?

  • April 17, 2015
  • 3 replies
  • 15348 views

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

      This topic has been closed for replies.
      Correct answer UDESCO

      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!

      3 replies

      UDESCO
      Adobe Employee
      UDESCOCorrect answer
      Adobe Employee
      August 16, 2016

      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!

      jørgenf80606748
      jørgenf80606748
      New Participant
      February 26, 2016

      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

      kglad
      kglad
      Community Expert
      April 17, 2015

      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.

      A
      Aaron BeallAuthor
      Inspiring
      April 17, 2015

      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?

      A
      Aaron BeallAuthor
      Inspiring
      April 17, 2015

      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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices