Forums » Help » Resize canvas smoothly to the browser width/height ?

This browser game resizes the canvas and all the entities within extremly smooth when you change the size of browser window. Try it for your self:
http://play.wimi5.com/run/index.html?type=sgs&name=plants-vs-monsters

This game is made with impactjs. It can also resize the canvas and entities but not that smoothly as in the previous example. When you change the size of the browser, there is some delay before everything is scaled.
http://manyland.com/

Is there a way to make it like the first game?
If not, at least how to make like the Manyland?

I use css scaling: (I set my width and height using ImpactMixin, and I start the game loop once game.min.js is loaded instead of using a "onload" event)

//on index.html

	<script type="text/javascript">
		ImpactMixin = {
			config: {
				dimensions: {
					width: 800,
					height: 450
				}
			}
		};
	</script>

//on main.js
	ig.init = function () {

		ig.init.scaleCanvas();
		ig.main('#canvas', ig.Main, 60, ig.config.dimensions.width, ig.config.dimensions.height, 1, ig.Loader);
		window.addEventListener('resize', ig.init.scaleCanvas, false);
	};
	ig.init.scaleCanvas = function () {
		var canvas = document.getElementById('canvas'),
			widthProprotion = (window.innerWidth / ig.config.dimensions.width),
			heightProprotion = (window.innerHeight / ig.config.dimensions.height),
			ratioConstraint = Math.min(widthProprotion, heightProprotion);
		// Scale the canvas
		canvas.style.width = (ig.config.dimensions.width * ratioConstraint) + "px";
		canvas.style.height = (ig.config.dimensions.height * ratioConstraint) + "px";
	};
	return ig.init();

Many thanks for the code.

Is ImpactMixin just a variable or is it smt. like a plugin ?

http://impactjs.com/documentation/class-reference/ig-core#impactmixin

Yup!

That worked perfectly!

I thought that css scaling somehow slow but it isn't.

I wonder if this also works for with Ejecta.

Probably It doesn't work on Ejecta since there is no DOM, and i haven't played around with it enough to provide an alternate method