HTML5 Game - off-white grid

  1. HOME
  2. HTML5 Game
  3. Canvas Shape
  4. Grid

Description

off-white grid

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
      <style> 
         body {/*from ww w  . j a  v a2s .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='1500' height='1500'>
      Canvas not supported
    </canvas>

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

     for (let x = 0.5; x < 500; x += 10) { 
       context.moveTo(x, 0); 
       context.lineTo(x, 375);    
      } 

     for (let y = 0.5; y < 375; y += 10) { 
       context.moveTo(0, y); 
       context.lineTo(500, y);    
      } 

      context.strokeStyle = "#eee"; 
      context.stroke(); 


       </script> 

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

Related Topic