Add fullscreen support

[kylefeng28]

The original Touhou games were always fullscreen by default (if I remember correctly), but in the browser the user must initiate the fullscreen, so it cannot be automated, so I just added a simple button.

[takahirox]

Thanks for the pull request. But on my 1366x768 monitor, the side bar hides the right part of main game scene.

Marisa is at red circle.

And the bad performance is another issue.

Are they fine on your environment?

[kylefeng28]

Yep, this happens for me too. I did not notice this at first; thanks for pointing it out. The problem is that I didn't take into account that mainCanvas and bgCanvas are of different sizes. I found that this CSS code works (I had to remove your inline styles, sorry!):

#canvasdiv {                                                                    
  position: relative;
  width: 640px;
  height: 480px;
}

/* Fix for WebKit especially :( */
#canvasdiv:-webkit-full-screen { width: 100%; height: 100%; }
#canvasdiv:-moz-full-screen { width: 100%; height: 100%; }
#canvasdiv:-ms-fullscreen { width: 100%; height: 100%; }
#canvasdiv:fullscreen { width: 100%; height: 100%; }

canvas {
  position: absolute;
  /*left: 50%; top: 0px;*/
  left: 0px; top: 0px;
  width: auto;
  height: 100%;
}

It doesn't expand fully to the whole screen, but it does expand proportionally so that the height is equal to the height of the screen. I find it better this way, as the pictures are not stretched or distorted too much.

But there still is another thing that bothers me: in fullscreen mode, the canvases are not centered. I tried to fix it using:

canvas#mainCanvas {
  -webkit-transform: translateX(-50%);
}

canvas#bgCanvas {
  /* 640-480 = 160 */
  /*
  -webkit-transform: translateX(-160px);
  -webkit-transform: translateX(-50%);
  */
  -webkit-transform: translateX(calc(-140px - 50%));
}       

But this only works for fullscreen mode, there is no way to tell whether the browser is in fullscreen mode or not. Any ideas?

Another thing is, should I close this pull request and open a new one for the new changes?

[takahirox]

Sorry for the late but I'll check soon!

[jeromeetienne]

you can simply put the body as fullscreen btw.

it simplify all the computations