Heya -
I've done lots of gamedev before, but am giving a try to some HTML5 stuff. I'm having issues writing CSS on my index.html to resize my canvas to the correct size. I've tried:
```
canvas { width: 100%; height: 100%}
```
which leads to perfect results on the page, goes oversize on fullscreen and I've tried:
```
<style>
canvas, html, body {
margin: 0;
padding: 0;
}
canvas {
max-width: 100vw;
max-height: 100vh;
position: absolute;
}
@media (min-width: 75vh)
{
canvas {
width: 75vh; /* (720 / 960) * 100*/
height: 100vh;
left: 50%;
transform: translateX(-50%)
}
}
@media (max-width: 75vh)
{
canvas {
width: 100vw;
height: 133.333vw; /* (960 / 720) * 100 */
display: flex;
top: 50%;
transform: translateY(-50%)
}
}
</style>
```
which leads to perfect results on fullscreen, but pushes the canvas out of the container as the vw is from the page, not the inside of the iframe (I think).
I've tried using ```:fullscreen canvas``` and ```canvas:fullscreen` as well.
Has anybody got any good css template they can share? I know I want it to be 720x960 on the page, or in the center of the screen, resized keeping aspect ratio if fullscreen.