HTML5 Game - Drawing a grid

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

Description

Drawing a grid

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
  <head>
    <title>Drawing a Grid</title>

    <style>
      body {/*from w w w  .j a  v a  2 s.  c o  m*/
         background: #eeeeee;
      }

      #canvas {
         background: #ffffff;
         cursor: pointer;
         margin-left: 10px;
         margin-top: 10px;
         -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
         -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
         box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
      }
    </style>
  </head>

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

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

function drawGrid(context, color, stepx, stepy) {
   context.strokeStyle = color;
   context.lineWidth = 0.5;

   for (let i = stepx + 0.5; i < context.canvas.width; i += stepx) {
      context.beginPath();
      context.moveTo(i, 0);
      context.lineTo(i, context.canvas.height);
      context.stroke();
   }

   for (let i = stepy + 0.5; i < context.canvas.height; i += stepy) {
      context.beginPath();
      context.moveTo(0, i);
      context.lineTo(context.canvas.width, i);
      context.stroke();
   }
}

drawGrid(context, 'lightgray', 10, 10);
    
    </script>
  </body>
</html>

Related Topic