Aligning a footer to the bottom of a responsive canvas without it being cropped

Report · Jan 18, 2019

I'm working on a project with a responsive html5 canvas which will have an animation to fill the whole browser, but have a menu bar across the bottom (and other UI aligned to the left and right).

I have set publish settings to 'Make Responsive' = Both, and 'Scale to fill visible area' = Stretch to fit.

The problem is that these setting often crop the top and bottom of the stage, which is fine for the animated content, but not for the UI.

The stage is 1920x1080, and aligning to 1080px most of the time works fine, but in some browser sizes, when the content is cropped, it won't show.

Left in blue I have text output from a few options to get browser and canvas height, the red lines show the y of the stage.

In this example, I can see I would need to put the footer at y=800, but cannot see where I can get that value dynamically.

The test is here

staging.lachlandean.com/test/AnimateCC/FindBottom/findBottom.html

this.stop();
_this = this;
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
            
    _this.t1.text = "getHeight1: "+ getHeight1();
    _this.t2.text = "getHeight2: "+getHeight2();
    _this.t3.text = "getHeight3: "+getHeight3();
    _this.t4.text = "getHeight4: "+getHeight1();
    _this.t5.text = "getHeight5: "+getHeight2();
}
function getHeight1() {
     return window.innerHeight; 
}
function getHeight2() {
    return Math.max(
        document.body.scrollHeight,
        document.documentElement.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.offsetHeight,
        document.documentElement.clientHeight
      );
}
function getHeight3() {
     return stage.canvas.height / window.devicePixelRatio;
}
function getHeight4() {
     return canvas.getAttribute('height') / window.devicePixelRatio;
}
function getHeight5() {
     return canvas.getAttribute('height') / window.devicePixelRatio;
}
var i;
for (i = 0; i < 30; i++) {
    var testBox = new lib.testBox();
    _this.addChild(testBox);
    testBox.y=50*i;
    testBox.test_txt.text = testBox.y
    testBox.x=1000
}

Report · Jan 22, 2019

Hi Lachlan D

nobody answered you so far, I'm sorry. I for my part am intrigued by your problem and try to build a manual workaround, though only with halfway success. So far I always used Center stage/Make responsive/Scale to fill visible area: Fit in view to scale proportionally. I always though that using Stretch to fit would distort the stage proportions if necessary. But this is obviously not the case.

When one uses Center stage and Stretch to fit and your stage proportions don't fit into the browsers display area, the stage is cropped in equal measures at the top and bottom. At least on viewports with landscape orientation.

From your coded calculations to get the display height, only the window.innerHeight is working reliably in all situations.

I added to the exported javascript file a 'manual' script section via a user-defined HTML template. This is my section I've added directly below the second  comment:

<script>
    function stretchToFit() {
        var _width = window.innerWidth;
        var _height = window.innerHeight;
        anim_container.style.width = _width + "px";
        anim_container.style.height = _height + "px";
        canvas.style.width = _width + "px";
        canvas.style.height = _height + "px";
        dom_overlay_container.style.width = _width + "px";
        dom_overlay_container.style.height = _height + "px";
        console.log("width = " + _width + ", height = " + _height);
    }
    window.onresize = function() {
        stretchToFit();
    };
</script>

Then in the actual FLA I coded in the first frame:

stage.on('drawstart', blowUp, this, true);
function blowUp() {
    stretchToFit();
}

This with drawstart might not be necessary, I just want to make sure that everything is ready before calling the function stretchToFit().

This works fine in Firefox when I test/load the HTML afresh. My header and footer fit perfectly top and bottom and the whole display area is filled. But the second part, window.onresize for catching any resize of the browser window doesn't work. On resize the stage and the other divisions jump back to the nominal width and height values form the FLA export. In this context it is important to mention, that I deactivated the entire Make responsive section in Publishing Settings. I hope with my manual replacement to get a real Stretch to fit.

I am of course aware that my manual addition works somewhat counter to the code in the exported JS file under //Code to support hidpi screens and responsive scaling.

Another problem of this approach is that the distortion of proportions causes blurred visuals probably due to subpixels. But rounding up to integer numbers might help.

Anyway I keep working on this and if you're still interested I will publish further developments here and my current work file is accessible here:

Dropbox - stretch_to_fit_xp.zip

Report · Jan 22, 2019

Thanks.

For the prototype I built, I simply moved the menu into a div floating over the top of the canvas, and absolute positioned it, which I might have to stick with for this project. Though I'm sure a real stretch to fit, and aligning stuff to the edge of the viewport woud be super usefull.

Report · Jan 25, 2019

Hi Lachlan D

I'm glad your prototype method works for you. For my part I continued my experiment to get a Real Stretch-To-Fit and I think I succeeded.

Regarding the window.onresize problem I discovered that the regulary Adobe javascript contains a window.addEventListener('resize', resizeCanvas); and a function resizeCanvas() {..} which got executed after my window.onresize and overwrote everything I did. Now with a delay (setTimeout) in my resize I forced mine to be executed after Adobe's. Quite cruel in a way .

This is now in my stretch_to_fit_template.html:

<script>
    function stretchToFit() {
        var _width = window.innerWidth;
        var _height = window.innerHeight;
        anim_container.style.width = _width + "px";
        anim_container.style.height = _height + "px";
        canvas.style.width = _width + "px";
        canvas.style.height = _height + "px";
        dom_overlay_container.style.width = _width + "px";
        dom_overlay_container.style.height = _height + "px";
    }
    window.onresize = function() {
        setTimeout(delayedStretch, 0);
    };
    function delayedStretch() {
        stretchToFit();
    }
</script>

If you are still interested feel free to download this package incl. the template.

Dropbox - stretch_to_fit_xp2.zip

Klaus