Maintaining scaling for responsive Canvas

Question

I am using Flash CC to create some Canvas content. I'm scaling the Canvas element using 100vh/vw to fill the browser window. This causes the elements on that stage to skew and scale as the browser is resized. Is it possible to make the stage fluid, while the elements on it do not deviate from their original scale?

Answer 1

Here is a link to a similar question I answered: How should I create a responsive canvas with createJs to adapt different mobile device's screens? that also includes a JSFiddle example.

If you know your content bounds (width and height), you can use the larger (or smaller) ratio to scale the content based on a new viewport size:

// Simple "fit-to-screen" scaling
var ratio = contentWidth / contentHeight; // Use the "default" size of the content you have.
var windowRatio = w/h; // Size of your viewport
var scale = w/contentWidth;
if (windowRatio > ratio) {
    scale = h/contentHeight;
}
content.scaleX = content.scaleY = scale;

With the Flash CC export, you can use either the nominalBounds of your exportRoot, which is the size of the contents calculated by Flash, or you can use the FLA size, which is stored in the lib.properties object.

Hope that helps.