HTML5 Game - Canvas Shape Drawing grid

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

Description

Drawing grid

Demo

ResultView the demo in separate window 

<!doctype html>
<html>
<body>
<canvas id="canvas" width="700" height="500"></canvas>
<script>
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d'); 

let xMin=50;/*from   ww  w .ja  va 2 s.  c  om*/
let xMax=400;
let yMin=50;
let yMax=300;
let xStep=10;
let yStep=10;
    
context.beginPath() ;    

let imax = Math.floor((xMax-xMin)/xStep);
for (let i=0; i<=imax; i++){
  context.moveTo(xMin+xStep*i,yMin);
  context.lineTo(xMin+xStep*i,yMax);
}
let jmax = Math.floor((yMax-yMin)/yStep);
for (let j=0; j<=jmax; j++){
  context.moveTo(xMin,yMin+yStep*j);
  context.lineTo(xMax,yMin+yStep*j);
}

context.stroke();


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

Related Topic