HTML5 Game - Grid with altered line thickness

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

Description

Grid with altered line thickness

Demo

ResultView the demo in separate window 

<!doctype html>
<html>
  <head>
    <title>More drawing to canvas</title>
    <style>
body {//  w  ww. java2 s  .co  m
  text-align: center;
  font-family: sans-serif;
}
canvas {
  background-color: black;
  border: 10px solid white;
}

canvas:focus {
  border: 10px solid grey;
}
</style>
      
  </head>
  <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 = 'yellow';
      context.fillRect(0, 0, 400, 400);
      context.strokeStyle = "#00FF00";
      for(let x = 0; x < canvas.width; x += 10) {
        context.beginPath();
        context.moveTo(x, 0);
        context.lineTo(x, canvas.height);
        context.lineWidth = (x % 50 == 0) ? 0.5 : 0.25;
        context.stroke();
      }
      for(let y = 0; y < canvas.height; y += 10) {
        context.beginPath();
        context.moveTo(0, y);
        context.lineTo(canvas.width, y);
        context.lineWidth = (y % 50 == 0) ? 0.5 : 0.25;
        context.stroke();
      }
    </script>
  </body>
</html>

Related Topic