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

hello, it is not in muse. it is html plain and text, the whole website is responsive already, I just added the animation to the website. but the animation seems not to work, is it perhaps that I need to do a div with percentage for width?

or is there any other specifications for a div in a website?

thank you

I am having trouble when I insert the oam file to my layout, the animation is not resizing. I don;t know why, the animation resizes when I double click on the html file generated by the oam file.

can you help please?

it is here in this link:

http://shedsforalltexas.com/default-animate.htm

thank you

Animate CC html code export editing:

function resizeCanvas() {  
   var w = lib.properties.width, h = lib.properties.height;  
   var iw = window.innerWidth, ih=window.innerHeight;  
   var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;  
   if(isResp) {               
    if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                   
     sRatio = lastS;               
    }   
    else if(!isScale) {    
     if(iw<w || ih<h)     
      sRatio = Math.min(xRatio, yRatio);   
    }   
    else if(scaleType==1) {    
     sRatio = Math.min(xRatio, yRatio);   
    }   
    else if(scaleType==2) {    
     sRatio = Math.max(xRatio, yRatio);   
    }  
   }
   <!-- 
   //canvas.width = w*pRatio*sRatio;  
   //canvas.height = h*pRatio*sRatio;
 
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;  

   //canvas.style.width = w*sRatio+'px';  
   //canvas.style.height = h*sRatio+'px';
   //stage.scaleX = pRatio*sRatio;  
   //stage.scaleY = pRatio*sRatio;
  
   //content.x = stage.canvas.width / 2;
   //content.y = stage.canvas.height / 2;
  
   // center stage ->
   //stage.x = stage.canvas.width / 2;  
   //stage.y = stage.canvas.height / 2;
   stage.scaleX = 1;  
   stage.scaleY = 1;  
   lastW = iw; lastH = ih; lastS = sRatio; 
  }

IN animate CC script for movie clip logo - center LEFT(-50px) + TOP:

x_re = window.innerWidth;

y_re = window.innerHeight;

logo.x = x_re - 50;

logo.y = y_re - 0;

center X Y logo:

logo.x = x_re/2;

logo.y = y_re/2;

This seems to be one of those things that nobody can agree on what the best way is to do it. If you do a web search on this subject, you'll get dozens of different solutions. Worse, the solution used depends heavily on how your page is set up.

For me, for example, I put everything that needs to be scaled in a container DIV that occupies the entire screen, styled as follows:

#container {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 900px;
    height: 650px;
    background-color: #000;
    overflow: hidden;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

Then I use jQuery to call a handling function when the window is resized. I don't like relying on yet another third-party library, but detecting resize events across all browsers is apparently non-trivial, so I'm happy to let jQuery worry about it.

$(window).resize(handleResize);

The resize handler takes cares of scaling the container DIV to the window size while maintaining aspect ratio, and keeps it horizontally centered:

function handleResize(e) {
    var w = $(this).width();
    var h = $(this).height();
    var scale = Math.min(w / _LSN_WIDTH, h / _LSN_HEIGHT);
    $("#container").css({"-webkit-transform" : "scale(" + scale + ")"});
    $("#container").css({"-ms-transform" : "scale(" + scale + ")"});
    $("#container").css({"transform" : "scale(" + scale + ")"});
    $("#container").css({"left" : (w / 2 - (_LSN_WIDTH * scale) / 2) + "px"});
}

I've only tested this on desktop IE, Firefox, and Chrome. So, y'know, caveat emptor.

easiest way is styling canvas tag