HTML5 Game - Canvas Shape Draw grid

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

Description

Draw grid

Demo

ResultView the demo in separate window 

<!doctype html>
<html>
  <head>
    <title>More drawing to canvas</title>
    <link rel="stylesheet" href="styles.css">
  </head>/*from   ww  w. j  a  v a2s. com*/
  <body>
    <h1>More drawing to canvas</h1>
    <canvas id="balls" width="400" height="400"></canvas>
    <script>
      let canvas = document.getElementById("balls");
      let context = canvas.getContext("2d");
      context.fillStyle = 'black';
      context.fillRect(0, 0, 400, 400);
      context.strokeStyle = "#00FF00";
      context.lineWidth = 0.25;

      for(let x = 0; x < canvas.width; x += 10) {
        context.moveTo(x, 0);
        context.lineTo(x, canvas.height);
      }


      for(let y = 0; y < canvas.height; y += 10) {
        context.moveTo(0, y);
        context.lineTo(canvas.width, y);
      }

      context.stroke();
    </script>
  </body>
</html>

Related Topic