HTML5 Canvas resizing between frames

Hi, I'm trying to make a simple interactive animation to be embedded in a website. 

The content is an interactive timeline, displayed vertically.  We're optimising the content for phones, since that's how we expect most users to access it.  The first frame will effectively be a menu screen, showing the timeline divided into sections.  Each section on this menu screen is a button, and clicking on one will zoom into a more detailed version of that section of the timeline, with clickable buttons for information on each date.  The zoomed-in sections will each be quite long (i.e. more than one screen tall) so need to be scrollable. 

The height of the display application that will be used to embed the interactive in the web page can be adjusted, so I can make the animation as tall as it needs to be to hold the tallest of the zoomed-in sections, and users can then scroll down it by scrolling the webpage.  Except if I make the stage tall enough to do that, it'll be that size on the menu screen, and it'll be possible to scroll past the menu into masses of empty space.

Looking for a simple way to resolve this within Animate.  I should add that I'm reasonably experienced with the basics of Animate, but a complete novice at HTML/javascript!  

I think the possible options might be:
- Change the height of the canvas between frames, e.g. on frame 1 the canvas is, say 1280px high, but on frame 13 it's 5000px.  Is this possible?  As far as I can tell it's not, but it would be the simplest fix.
-  Keep the canvas at the correct height to display the menu, add something to the javascript on subsequent frames to make the taller content scrollable, and have the content extend off the stage on the taller frames.
- Make the canvas the maximum height it needs to be on all frames, but add something to the javascript on the shorter frames so the content fixes in place.

Hope I've explained that clearly enough!  Thanks