Need Help With Resize With Aspect Ratio W/Code

[JeZxLee]

Hi,

Sorry, I need some help...

How can I modify the following code to resize game's canvas on browser resize while maintaining aspect ratio?

(original game canvas dimensions are 512x512)

		if (window.innerWidth != CurrentBrowserWidth || window.innerHeight != CurrentBrowserHeight)
		{
			var oldBrowserWidth = CurrentBrowserWidth;
			var oldBrowserHeight = CurrentBrowserHeight;
		
			CurrentBrowserWidth = window.innerWidth;
			CurrentBrowserHeight = window.innerHeight;
		
			renderer.autoResize = true;

			renderer.view.style.position = "absolute";
			renderer.view.style.display = "block";
			renderer.autoResize = true;
			renderer.resize(window.innerWidth, window.innerHeight);	
			
			if (oldBrowserWidth > CurrentBrowserWidth)
			{
				widthScale = ( widthScale * (CurrentBrowserWidth / oldBrowserWidth) );
			}
			else if (oldBrowserWidth < CurrentBrowserWidth)
			{
				widthScale = ( widthScale * (CurrentBrowserWidth / oldBrowserWidth) );
			}
			
			if (oldBrowserHeight > CurrentBrowserHeight)
			{
				heightScale = ( heightScale * (CurrentBrowserHeight / oldBrowserHeight) );
			}
			else if (oldBrowserHeight < CurrentBrowserHeight)
			{
				heightScale = ( heightScale * (CurrentBrowserHeight / oldBrowserHeight) );
			}
			
			stage.scale.set( widthScale, heightScale );
		}

The code above runs only on browser resize and is located in the main loop.

Any help would be appreciated, thank you!

JeZxLee

[JeZxLee]

Anyone can help with this?

I can't seem to figure out the math.

I have this: http://16bitsoft.com/files/PixiAudio5JS/index.html  (browser resize distorts canvas)

And want this: http://lettersfall.com  (browser resize maintains aspect ratio)

Thanks!

JeZxLee

[JeZxLee]

Ok, I figured it out by adding this code to above:

if (Browser == "Other")
{
	if (widthScale < heightScale)
	{
		CurrentBrowserHeight = CurrentBrowserHeight * (widthScale / heightScale);
		heightScale = widthScale;
	}
	else if (widthScale > heightScale)
	{
		CurrentBrowserWidth = CurrentBrowserWidth * (heightScale / widthScale);
		widthScale = heightScale;
	}
}

Thanks!

JeZxLee