Skip to main content
Bigloutz
Participant
December 13, 2017
Answered

How can I make my Animate CC's 'Canvas' output react like background-size:cover?

  • December 13, 2017
  • 1 reply
  • 1373 views

I want my animation to fill the full screen and when the page is resizing it remains centered horizontally and vertically like an image or a video with background-size:cover. Any idea for the output javascript?

    This topic has been closed for replies.
    Correct answer marjantrajkovski

    CANVAS tag is same like VIDEO tag. Use CSS for CANVAS without checking Make Responsive. VIDEO 800x600 = CANVAS 800x600 = IMG 800x600

    1 reply

    kglad
    Community Expert
    Community Expert
    December 13, 2017

    check the publish settings options you want:

    Bigloutz
    BigloutzAuthor
    Participant
    December 13, 2017

    !Thank you for your answer kglad but it doesn't help me because I don't want my animation to be responsive. I need that my canvas react exactly the same as a video or an image with background-size:cover. On mobile, the canvas is the same size but horizontally and vertically centered.

    In CSS it would be this:

    #animation_container { width: 100vw; height: 100vh;}

    #canvas {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    min-height: 100%;

    min-width: 100%;

    }

    But I have to generate it from Adobe Animate. So, for the moment, I have this script on the first frame of my animation but it doesn't work the way I need...

    var page_body = document.getElementsByTagName("body")[0];

    page_body.style.backgroundColor = "#00000";

    page_body.style.overflow = "hidden";

    page_body.style.position = "fixed";

    var page_canvas = document.getElementsByTagName("canvas")[0];

    stageWidth = page_canvas.width;

    stageHeight = page_canvas.height;

    var viewport = document.querySelector('meta[name=viewport]');

    var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';

    if (viewport === null) {

    var head = document.getElementsByTagName('head')[0];

    viewport = document.createElement('meta');

    viewport.setAttribute('name', 'viewport');

    head.appendChild(viewport);

    }

    viewport.setAttribute('content', viewportContent);

    function onResize() {

    var widthToHeight = stageWidth / stageHeight;

    var newWidth = window.innerWidth;

    var newHeight = window.innerHeight;

    var newWidthToHeight = newWidth / newHeight;

    //

    if (newWidthToHeight > widthToHeight) {

    newWidth = newHeight * widthToHeight;

    page_canvas.style.height = newHeight + "px";

    page_canvas.style.width = newWidth + "px";

    } else {

    newHeight = newWidth / widthToHeight;

    page_canvas.style.height = newHeight + "px";

    page_canvas.style.width = newWidth + "px";

    }

    scale = newWidthToHeight / widthToHeight;

    stage.width = newWidth;

    stage.height = newHeight;

    page_canvas.style.marginTop = ((window.innerHeight - newHeight) / 2) + "px";

    page_canvas.style.marginLeft = ((window.innerWidth - newWidth) / 2) + "px";

    }

    window.onresize = function () {

    onResize();

    }

    onResize();

    marjantrajkovskiCorrect answer
    Inspiring
    December 13, 2017

    CANVAS tag is same like VIDEO tag. Use CSS for CANVAS without checking Make Responsive. VIDEO 800x600 = CANVAS 800x600 = IMG 800x600