Possible To Draw Off Of The Canvas?

[JeZxLee]

Hi,

Currently we stretch the game display to fill the Android screen which looks bad.
We want to maintain aspect ration and draw a joystick on the part of the Android screen that has nothing on it.
Is it possible to draw sprites off of the PixiJSv4 canvas?

Little confused about this, any help would be appreciated, thanks!

JeZxLee

[JeZxLee]

Here is a photo of what I want to do:

[JeZxLee]

Here is the current resize code:

 

function CheckForBrowserResize(forceResize)
{
	if (DONTRESIZE == true)
	{
		renderer.resize( Math.floor(OriginalCanvasWidth), Math.floor(OriginalCanvasHeight) );
		renderer.view.style.position = 'absolute';
		renderer.view.style.left = 0;
		stage.scale.set( 1, 1 );
		
		return;
	}
	
	if (forceResize == false)
	{
		var oldBrowserWidth = CurrentBrowserWidth;
		var oldBrowserHeight = CurrentBrowserHeight;
	}
	
	if (window.innerWidth != OriginalCanvasWidth || window.innerHeight != OriginalCanvasHeight)
	{
		CurrentBrowserWidth = window.innerWidth;
		CurrentBrowserHeight = window.innerHeight;
		
		if (forceResize == true)
		{
			if (OriginalCanvasWidth > CurrentBrowserWidth)
			{
				widthScale = ( widthScale * (CurrentBrowserWidth / OriginalCanvasWidth) );
			}
			else if (OriginalCanvasWidth < CurrentBrowserWidth)
			{
				widthScale = ( widthScale * (CurrentBrowserWidth / OriginalCanvasWidth) );
			}
			
			if (OriginalCanvasHeight > CurrentBrowserHeight)
			{
				heightScale = ( heightScale * (CurrentBrowserHeight / OriginalCanvasHeight) );
			}
			else if (OriginalCanvasHeight < CurrentBrowserHeight)
			{
				heightScale = ( heightScale * (CurrentBrowserHeight / OriginalCanvasHeight) );
			}
		}
		else
		{
			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) );
			}
		}
		
//		if (isMobile == false)
		{
			if (widthScale < heightScale)
			{
				CurrentBrowserHeight = CurrentBrowserHeight * (widthScale / heightScale);
				heightScale = widthScale;
			}
			else if (widthScale > heightScale)
			{
				CurrentBrowserWidth = CurrentBrowserWidth * (heightScale / widthScale);
				widthScale = heightScale;
			}
		}

		renderer.resize( Math.floor(OriginalCanvasWidth*widthScale), 
        Math.floor(OriginalCanvasHeight*heightScale) );
		renderer.view.style.position = 'absolute';
		renderer.view.style.left = (  ( window.innerWidth - (renderer.width) ) >> 1  ) + 'px';
		stage.scale.set( widthScale, heightScale );
	}
}

 

[Taz]

You can make a second canvas or make one canvas big enough to draw everything.

[JeZxLee]

A second canvas? you mean "renderer"?
Would mouse/touch work ok on second renderer?
(there would be gamepad buttons on the second renderer)

Thanks for you response!

JeZxLee

[Taz]

Yeah a second renderer for the second canvas - if you register interaction events for it that should work same as before

[Taz]

But you might find 1 big canvas (e.g. with containers to scale and position the parts separately), maybe would perform better for your target Android devices - I'd try both approaches before committing or trying to make it look nice

[JeZxLee]

ok, thanks for the information...

JeZxLee