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


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


          var canvas, stage, exportRoot;

          function init() {

            canvas = document.getElementById("canvas");

            exportRoot = new lib.JeffersonRoseBand();

            stage = new createjs.Stage(canvas);




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




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


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






      //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,
        webfonts: {},
        manifest: []