Untitled

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{ position: relative; margin:100px; background:#177245; }
#my_canvas{ background:#77DD77; border:#000 1px solid;
}
  #my_canvas {
    width: 100%; height: 100%;
  }
html, body {
  overflow-x: hidden;
}
body {
  position: relative;
}
</style>
<body>
    <body>
        <div>
            <canvas id="my_canvas" width="1920" height="1080"></canvas>
            <button id="down_btn">Giù ↓</button>
            <button id="left_btn" style="position: absolute; top:200px; left:20px">← Sinistra</button>
            </div>

    <div id="Shot" style="display: inline-block; text-align:center; float: right; position: relative;">
        <button id="fire_btn">Colpo</button>
    </div>
    <style>
     button{
        background-color: #FF8800;
        border: 2px solid #FCA800;
        color: #fff;
        font-weight: bold;
        padding: 0;
        height: 25px;
        width: 80px;
      }
    </style>

    <div id="UDRL" style="display: inline-block; text-align:center; float: left; position: relative;">
        <div>

        <button id="up_btn">Su ↑</button>
        </div>
        <div>
          <button id="right_btn">Destra →</button>
          </div>
</body>
</html>