HTML5 Game - HTML controls in a canvas

Description

HTML controls in a canvas
Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Bouncing Balls</title>

      <style> 
         body {// w  w w  . j a v a2  s.com
            background: #dddddd;
         }

         #canvas {
            margin-left: 10px;
            margin-top: 10px;
            background: #ffffff;
            border: thin solid #aaaaaa;
         }

         #glasspane {
            position: absolute;
            left: 50px;
            top: 50px;
            padding: 0px 20px 10px 10px;
            background: rgba(0, 0, 0, 0.3);
            border: thin solid rgba(0, 0, 0, 0.6);
            color: #eeeeee;
            font-size: 12px;
            box-shadow: rgba(0,0,0,0.5) 5px 5px 20px;
         }

         #glasspane h2 {
            font-weight: normal;
         }

         #glasspane .title {
            font-size: 2em;
            color: rgba(255, 255, 0, 0.8);
         }

         #glasspane a:hover {
            color: yellow;
         }

         #glasspane a {
            text-decoration: none;
            color: #cccccc;
            font-size: 3.5em;
         }

         #glasspane p {
            margin: 10px;
            color: rgba(65, 65, 220, 1.0);
            font-size: 12pt;
            font-family: Palatino, Arial, Helvetica, sans-serif;
         }
      </style>
   </head>

   <body>
      <div id='glasspane'>
         <h2 class='title'>Bouncing Balls</h2>

         <p>One hundred balls bouncing</p>

         <a id='startButton'>Start</a>
      </div>

      <canvas id='canvas' width='750' height='500'>
         Canvas not supported
      </canvas>

      <script>

let context = document.getElementById('canvas').getContext('2d'),
    startButton = document.getElementById('startButton'),
    glasspane = document.getElementById('glasspane'),
    paused = true,
    circles = [];

context.lineWidth = 0.5;
context.font = '32pt Arial';

for (let i=0; i < 100; ++i) {
   circles[i] = { 
       x: 100, 
       y: 100, 
       velocityX: 3*Math.random(), 
       velocityY: 3*Math.random(), 
       radius: 50*Math.random(),
       color: 'rgba(' + (Math.random()*255).toFixed(0) + ', ' +
                        (Math.random()*255).toFixed(0) + ', ' +
                        (Math.random()*255).toFixed(0) + ', 1.0)' };
}

startButton.onclick = function(e) {
   e.preventDefault();
   e.stopPropagation();
   paused = ! paused;
   startButton.innerText = paused ? 'Start' : 'Stop';
};

glasspane.onmousedown = function(e) {
   e.preventDefault();
   e.stopPropagation();
}

context.canvas.onmousedown = function(e) {
    e.preventDefault();
    e.stopPropagation();
};

setInterval(function() {
   if (!paused) {
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      circles.forEach(function(circle) {
         context.beginPath();
         context.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2, false);
         context.fillStyle = circle.color;
         context.fill(); 
         adjustPosition(circle);
      });
   }
}, 1000 / 60);

function adjustPosition(circle) {
   if (circle.x + circle.velocityX + circle.radius > context.canvas.width ||
       circle.x + circle.velocityX - circle.radius < 0) 
      circle.velocityX = -circle.velocityX;

   if (circle.y + circle.velocityY + circle.radius > context.canvas.height ||
       circle.y + circle.velocityY - circle.radius  < 0) 
      circle.velocityY= -circle.velocityY;

   circle.x += circle.velocityX;
   circle.y += circle.velocityY;
}

      </script>
  </body>
</html>