<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      canvas { background: #eeeeee; display: block; margin: 0 auto; }
    </style>
  </head>
  <body>

<center>

<input type="file" id="files" multiple/>

<p/>
<font face="Calibri">
<p id="remaining"></p>
</font>

<p id="japanese"></p>

<input id="input"/>
<button id="nextBtn" type="button" onClick="onClick()" disabled>次へ</button>
<p/>

<canvas id="canvas" width=710" height="240"/>

<p id="mistake"></p>
<p/>


</center>
<script src="keyboard.js"></script>
<script src="zodiac.js"></script>

</body>
</html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      canvas { background: #eeeeee; display: block; margin: 0 auto; }
    </style>
  </head>
  <body>

<center>

<input type="file" id="files" multiple/>

<p/>
<font face="Calibri">
<p id="remaining"></p>
</font>

<p id="japanese"></p>

<input id="input"/>
<button id="nextBtn" type="button" onClick="onClick()" disabled>次へ</button>
<p/>

<canvas id="canvas" width=710" height="220"/>

<p id="mistake"></p>
<p/>


</center>
<script src="keyboard.js"></script>
<script src="zodiac.js"></script>

</body>
</html>
Adjust the canvas's height so that the keyboard is centered
Adjust the canvas's height so that the keyboard is centered