19 Replies Latest reply on Mar 22, 2017 8:29 AM by marjantrajkovski

    How can I make the size of Animate CC's 'Canvas' output be responsive within an HTML page?

    grahamc85433023 Level 1

      In Animate CC, I've defined the width and height of the Canvas as 720px X 650px. There doesn't seem to be an option for percent.

      The height/width shows up in two places, one in the <canvas> element, the other in the .js file. I'm trying to figure out if there's a way to adjust these to make them re-size/scale dynamically with the size of the container (for responsive design).

       

      <!--Snippet of HTML file-->

           <head>

           <script src="js/canvasProject.js"></script>

           <script>

          var canvas, stage, exportRoot;

          function init() {

            canvas = document.getElementById("canvas");

            exportRoot = new lib.JeffersonRoseBand();

            stage = new createjs.Stage(canvas);

            stage.addChild(exportRoot);

            stage.update();

            createjs.Ticker.setFPS(lib.properties.fps);

            createjs.Ticker.addEventListener("tick", stage);

          }

          </script>

           </head>

           <body onload="init();";>

           <div>

           <canvas id="canvas" width="720" height="650" ></canvas>

           </div>

           ...

       

       

       

      //Beginning of canvasProject.js

      (function (lib, img, cjs, ss) {
      var p; // shortcut to reference prototypes
      lib.webFontTxtFilters = {};
      // library properties:
      lib.properties = {
        width: 720,
        height: 650,
        fps: 24,
        color#292929",
        webfonts: {},
        manifest: []
      };