JSFiddle - React, Tailwind, and code Playground

by dzanis

HTML

<div class="canvas-container">
 <canvas id='canvas'></canvas>
<button id='button'onclick='document.documentElement.requestFullscreen()' >full screen</button>
</div>

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */
	html, body { width: 100%; height: 100%; } /* just to be sure these are full screen*/
	canvas {position: absolute; border: 0px none; }
	button { position:absolute; width: 33%; left: 33%; bottom: 5%;}
	.canvas-container { position: relative; width: 100%; height: 100%; }

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas()
{					
if(window.orientation !== undefined)// if mobile
		{
			canvas.width = document.documentElement.clientWidth;
			canvas.height = document.documentElement.clientHeight;
		}
		else
		{ // if pc
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		}	
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.font = "30px Arial";
ctx.fillText(window.innerWidth+'x'+window.innerHeight,window.innerWidth/2, window.innerHeight/2);
}
resizeCanvas();