Forums » Help » Best way to have images/text/entities resize when the browser size changes?

I am able to dynamically resize the canvas with ig.system.resize(...) but I can't seem to resize the image I have drawn on the canvas.

You mean change scale on the fly?

You'll need to tweak the image class slightly. Like this.

var width = 240;
var height = 160;
var scale = 2;

// Change canvas dimensions and scale.
ig.system.resize(width, height, scale);

// Adjust all images to the current scale.
for(var key in ig.Image.cache) {
    ig.Image.cache[key].resize(scale);
}

So if I want to resize entities and fonts I will have to edit the classes?

I'm not sure what you're asking.

If you want to change the size of an entity, can you do so using the .size property.

If you want to re-size a font, you're probably better off just creating the font sizes you'll need ahead of time using the font tool.

Is that what you mean?

I want everything on the canvas to scale with the same proportions when the browser size is changed.

Then you're going to run in to an issue:
Things don&039;t really scale up nicely unless #scale is an integer.
Scaling with the browser dimensions is easy with Flash, because vectors scale nicely.
Scaling pixels, like with Impact, produces artifacts that look nasty.

The best thing would be to change the scale by increments of 1 as dimensions change.

So a tiny browser might use a scale of 1.
When you increase the browser width by 300px, maybe increase the scale to 2.
When you increase the browser width by another 300px, maybe increase to 3.
Etc.

Thanks