Web API - Full screen

Help & Questions
1

What is the best way to make Deepar full screen when using Web App (without distortion) I have tried using common CSS methods but these don’t seem to work perfectly.

2

Hi could you just clarify if you want a button to go fullcreen on your page or if you want the DeepAR canvas to fill out the browser window?

3

I want the DeepAR canvas to full out the browser window.

4

I’m still having issues making this a full screen app in a HTML browser.

5

Either would work for me, I just can’t seem to get it to load full screen without distorting

6

The suggested method is to hard code the width and height into the canvas element

<canvas id="deepar-canvas" width="640" height="480"></canvas>

I’ve tried using
<canvas id="deepar-canvas" style="width:100%; height:100%"></canvas>

and using

<style type="text/css">
 canvas { width: 100%; height: 100%; }
</style>

and even

<script type="text/javascript">
   var element = document.getElementById("deepar-canvas");		
   var viewportWidth = window.innerWidth;
   var viewportHeight = window.innerHeight;
		
   element.style.height = viewportHeight + "px";
   element.style.width = viewportWidth + "px";
</script>

all of which just distort the output.

7

I found a solution, I had to give the canvas element a 9:16 aspect ratio before applying any resizes on the canvas using css. I applied it using a 1080p resolution as below:

<canvas id="deepar-canvas" width="1080" height="1920" ></canvas>

I then ensured my body and html elements were correctly set and the canvas was also set to maximise these elements (as below)

<style type="text/css">
body,html { padding: 0; margin: 0; overflow:hidden; width: 100%; height: 100%; }
canvas {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
8

Thank you for sharing a solution with the community.

Your issue was likely caused by DeepAR initialising in the incorrect aspect ratio.