HTML5 Game - Changing the Rectangle Color, Shape, and Position

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Rectangle Methods

Description

Changing the Rectangle Color, Shape, and Position

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
      <style> 
         body {//from w w w. j a v a  2  s  .  c om
            background: #dddddd;
         }

         #canvas {
            position: absolute;
            left: 0px;
            top: 0px;
            margin: 20px;
            background: #ffffff;
            border: thin solid #aaaaaa;
         }
      </style>
   </head>

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

    <script>
let context = document.querySelector('#canvas').getContext('2d');

  context.strokeStyle = 'lightgrey'; 
  context.fillStyle = 'dimgrey'; 
  context.lineWidth = 5; 
  context.rect(75, 50, canvas.width - 150, canvas.height - 100); 
  context.stroke(); 
  context.fill(); 

       </script> 

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

Related Topic