How to dynamically resize and center a Flash CreateJS canvas element animation

Question

I have seen some similar questions here but not actually what I need to know!

I am using Flash CS6 and outputting a CreateJS framework animation instead of regular .swf files. When you publish from within the API (Flash) it generates an html5 doc and an external .js file with the actual javascript that defines the animation.

Here's what I need: I want my animation to either be able to go full screen and maintain it's aspect ratio -OR- be set at say 1024x768 and be centered in the browser window but if viewed on a mobile device, dynamically resize to fit the device screen size or viewport size and centered.

A perfect example of what I need is here: http://gopherwoodstudios.com/sandtrap/ but I don't see which code is doing the dynamic resizing in this example.

Any help would be greatly appreciated. In addition, I am supplying the html5/js output of the Flash API since it seems to be very, very different than the example code given in other canvas-related posts.

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from index</title>

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script src="index.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
    canvas = document.getElementById("canvas");
    images = images||{};

    var manifest = [
        {src:"images/Mesh.png", id:"Mesh"},
        {src:"images/Path_0.png", id:"Path_0"}
    ];

    var loader = new createjs.PreloadJS(false);
    loader.onFileLoad = handleFileLoad;
    loader.onComplete = handleComplete;
    loader.loadManifest(manifest);
}

function handleFileLoad(o) {
    if (o.type == "image") { images[o.id] = o.result; }
}

function handleComplete() {
    exportRoot = new lib.index();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(24);
    createjs.Ticker.addListener(stage);
}
</script>
<style type="text/css">
body {text-align:center;}
#container { display:block;}

</style>
</head>

<body onload="init();" style="background-color:#D4D4D4">
    <div id="container">
        <canvas id="canvas" width="1024" height="768" style="background-color:#ffffff; margin: 20px auto 0px auto;"></canvas>
    </div>
</body>
</html>

Thanks again!

Bump, bump! Maybe my question is too convoluted. I just need to know how and where to (I think) use javascript to dynamically resize the canvas element to whatever screen it is showing in while maintaining it's aspect ratio. Any help would be seriously appreciated! — Machineuser, Nov 15 '12 at 14:38

score 4 · Accepted Answer · answered Jan 23 '13 at 21:51

don't know if you worked this one out in the end, but I recently had the same issue - I just needed to resize the whole createJs object to the viewport.

I added a listener to viewport resizing (I used jQuery), then resized the canvas stage to match the viewport, then using the height of the original flash stage height, or width depending on what you want (mine was 500), you can scale up the createJs movie object (exportRoot).

(function($){
  $(window).resize(function(){
     windowResize();                      
  });         
})(jQuery);

function windowResize(){
   stage.canvas.width = window.innerWidth;
   stage.canvas.height = window.innerHeight;    
   var test = (window.innerHeight/500)*1;
   exportRoot.scaleX = exportRoot.scaleY = test;
}

Hope that helps someone!

`exportRoot` was the missing part I needed. Thanks! – Zach Saucier Jun 09 '16 at 19:28 — Zach Saucier, Jun 09 '16 at 19:28

score 2 · Answer 2 · answered Aug 13 '13 at 04:16

     function resizeGame()
     {
        widthToHeight = 600 / 350;
        newWidth = window.innerWidth;
        newHeight = window.innerHeight;
        newWidthToHeight = newWidth / newHeight;
        if (newWidthToHeight > widthToHeight)
        {
            newWidth = newHeight * widthToHeight;
            gameArea.style.height = newHeight + 'px';
            gameArea.style.width = newWidth + 'px';
        } else
        {
            newHeight = newWidth / widthToHeight;
            gameArea.style.height = newHeight + 'px';
            gameArea.style.width = newWidth + 'px';

        }

        scale = newWidthToHeight / widthToHeight;
        stage.width = newWidth;
        stage.height = newHeight;
        gameArea.style.marginTop = ((window.innerHeight - newHeight) / 2) + 'px';
        gameArea.style.marginLeft = ((window.innerWidth - newWidth) / 2) + 'px';

      }

widthToHeight is your game canvas scaling ratio. gameArea is your div id

make it sure your html tag must contain

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

score 0 · Answer 3 · answered Dec 28 '12 at 15:22

The inline width and the height of the canvas define "resolution" - setting a CSS style of width defines "scale". Think of it like canvas size and image size in photoshop.

Because width and height of elements isn't defined when you export, I'm struggling to come up with a good way to scale up. But, you can always scale down. Use CSS to set the max-width and max-height to be 1024x768 (or whatever your original is) and then set the regular width and height to be whatever you need (proportionately).

Then just use CSS to center - margin:auto and all that.

Thanks Robodevil. Though this is not a complete answer it is probably 70% of what I need and useful. Thanks again. — Machineuser, Dec 28 '12 at 22:25

Ryan Ore · Answer 4 · 2015-04-30T16:37:50.937

I find it useful to allow my canvas to be fluid based on width, and then adjust the height based on the aspect ratio on resize. There are a couple things to keep in mind.

You must assign a width & height attribute to the canvas element whether you're creating with javascript or with html
You have to adjust the object's style.height property, not the canvas height property directly.

If you follow this sort of example you can even use media queries to give even more flexibility. jsFiddle, if you please.

    var el = document.getElementById('mycanvas');
    var aspectRatio = el.height / el.width;

    resizeCanv = function resize (){
        var style = getComputedStyle(el);
        var w = parseInt(style.width);
        el.style.height = (w * this._aspectRatio) + 'px';
    };

    // TODO: add some logic to only apply to IE
    window.addEventListener('resize', resizeCanv);

EDIT: I haven't tested this with any interactivity within the canvas, only layout and animations.

How to dynamically resize and center a Flash CreateJS canvas element animation

4 Answers4