title: Creating a clickable grid using javascript
body: <p>So recently I started learning javascript, and as part my first project I'd like to create clickable grid on canvas. </p>
  
  <p>js</p>
  
  <pre><code>   var c = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var gridWidth = 64;
  var gridHeight = 64;
  var cellWidth = 5;
  
  canvas.width = gridWidth * cellWidth;
  canvas.height = gridHeight * cellWidth;
  canvas.style.width = canvas.width;
  canvas.style.height = canvas.height;
  
  var livingCellPercent = 30
  var grid = [];
  var newGen = [];
  // fill grid randomly with given % of living cells
  
  for (var i = 0; i &lt; gridWidth; i++) {
      grid[i] = []
      newGen[i] = []
      for (var j = 0; j &lt; gridHeight; j++) {
          grid[i][j] = [];
          newGen[i][j] = []
  
          var random = Math.random() * 100;
  
          if (random &gt; livingCellPercent) {
              grid[i][j] = 1;
          }
      }
  }
  
  
  function drawOnload() {
      ctx.fillStyle = '#f4f4f2';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
  
      for (var i = 0; i &lt; gridWidth; i++) {
  
          for (var j = 0; j &lt; gridHeight; j++) {
              ctx.beginPath();
              ctx.rect(i * cellWidth, j * cellWidth, cellWidth, cellWidth);
              ctx.strokeStyle = "#999";
              ctx.lineWidth = 0.4;
              ctx.stroke();
          }
      }
  }
  drawOnload();
  
  //1. if dead cell has 3 living neighbours, it lives again;
  //2. if living cell nas less than 2 living neighbours, it dies of loneliness;
  //3. if living cell has more than 3 living neighbours, it dies of overpopulation;
  //4. if living cell has exactly 3 or exactly 2 neighbours, it lives on;
  function gol() {
      for (var i = 1; i &lt; gridWidth - 1; i++) {
          for (var j = 1; j &lt; gridHeight - 1; j++) {
              var count = countNeighbors(i, j);
              if (grid[i][j] == 0) {
                  if (count == 3) {
                      newGen[i][j] = 1;
                  }
              } else {
                  if (count &lt; 2 || count &gt; 3) {
                      newGen[i][j] = 0;
                  } else { newGen[i][j] = 1; }
              }
          }
      }
      grid = newGen;
  }
  
  // count neighbours
  
  function countNeighbors(i, j) {
      var count = 0;
  
      counter(i - 1, j - 1);
      counter(i - 1, j);
      counter(i - 1, j + 1);
      counter(i, j - 1);
      counter(i, j + 1);
      counter(i + 1, j - 1);
      counter(i + 1, j);
      counter(i + 1, j + 1);
  
      function counter(i, j) {
          if (i &gt; 0 &amp;&amp; i &lt; gridWidth &amp;&amp; j &gt; 0 &amp;&amp; j &lt; gridHeight) {
              if (grid[i][j] == 1) count++;
          }
      }
      return count;
  }
  
  
  // game update
  function update(dt) {
  
      gol();
      draw();
  }
  
  
  function draw() {
      ctx.fillStyle = '#f4f4f2';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
  
      for (var i = 0; i &lt; gridWidth; i++) {
  
          for (var j = 0; j &lt; gridHeight; j++) {
              ctx.beginPath();
              ctx.rect(i * cellWidth, j * cellWidth, cellWidth, cellWidth);
              if (grid[i][j] == 1) {
                  ctx.strokeStyle = "#999";
                  ctx.fillStyle = "#40ff00";
                  ctx.fill();
                  ctx.stroke();
              } else {
                  ctx.strokeStyle = "#999";
                  ctx.stroke();
              }
          }
      }
  
  }
  
  
  var lastTime;
  var t;
  
  function gameLoop() {
      var now = Date.now();
      var dt = (now - lastTime) / 1000.0;
      update(dt);
      lastTime = now;
      t = setTimeout(gameLoop, 50);
  };
  
  
  document.getElementById('startGame').addEventListener('click', gameLoop);
  
  function stop() {
      if (t) {
          clearTimeout(t);
          t = 0;
      }
  }
  document.getElementById('clear').addEventListener('click', stop);
  
  function clearGrid() {
      window.location.reload();
  }
  document.getElementById('clearGrid').addEventListener('click', clearGrid);
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
      &lt;button id="startGame"&gt;Start!&lt;/button&gt;
      &lt;button id="clear"&gt;Pause&lt;/button&gt;
      &lt;button id="clearGrid"&gt;New game&lt;/button&gt;
      &lt;button id="glider"&gt;g&lt;/button&gt;
      &lt;script src="game.js" type="text/javascript"&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>and each cell has assigned value of 0 or 1,
  but I don't really know how to make each cell clickable, and I want to change previous value on click. I know it's a trivial problem, but since I started learning javascript couple of days ago, I'm struggling with it since morning. Any help appreciated. </p>