text: Q:
  
  TypeError: undefined is not an object (evaluating 'board')
  
  I try to use canvas as a clickable board for minesweeper. My problem is that i can clicked out of the canvas but i don't want to it. Here's my code:    
  
  var board;
  var ctx;
  var bombs = [];
  var clickedX;
  var clickedY;
  
  function initBoard(w, h){
   board = document.getElementById("board");
   ctx = board.getContext('2d');
   drawBoard(w,h);
   placedBombs();
  }
  
  function drawBoard(w,h){ 
   board.squareSize = {
    w: board.width / w, 
    h: board.height / h
   };
   
   ctx.fillStyle = "#C0C0C0"
   ctx.fillRect(0, 0, board.width, board.height)
  
   board.drawGrid = function () {
    ctx.beginPath();
    for (var i = 0; i <= w; i++) {
     ctx.moveTo(i * this.squareSize.w, 0);
     ctx.lineTo(i * this.squareSize.w, this.height);
    }
    for (var i = 0; i <= h; i++) {
     ctx.moveTo(0, i * this.squareSize.h);
     ctx.lineTo(this.width, i * this.squareSize.h);
    }
    ctx.lineWidth = 0.3;
    ctx.stroke();
    ctx.closePath();
   }
   
   board.drawGrid(); 
  }
  
  function placedBombs(){
   for(var n=0; n<10; n++){
    bombs[n] = ([Math.floor(Math.random() * 10), Math.floor(Math.random() * 10)]);
   } 
  }
  
  board.onmouseup = function(e){
   board.squareSize = {
    w: board.width / 10, 
    h: board.height / 10
   };
  
   board.eventToGrid = function (e) {  
    return {    
     i: parseInt(e.offsetX / this.squareSize.w), 
     j: parseInt(e.offsetY / this.squareSize.h)
    };  
   } 
   var pos = board.eventToGrid(e);
   clickedX = pos.i;
   clickedY = pos.j;
   loc = document.getElementById("loc");
   loc.innerHTML = "Position: " + pos.i + ", " + pos.j;
   if(check(clickedX, clickedY) == false){
    lose();
   }
   /*else{
    clickPass(); 
   }*/
  }
  function check(clickedX, clickedY){
   console.log(clickedX);
   console.log(clickedY); 
   for(var i=0; i<bombs.length; i++){
    if((clickedX == bombs[i][0]) && (clickedY == bombs[i][1])){ 
     return false;
    }
   }
   return true; 
  }
  
  /*function clickPass(){
   
  }*/
   
  function lose(){
   alert("bomb");
  }
  <body onload="initBoard(10,10)">
    <canvas id="board" width="350" height="350">
    </canvas>
    <div id="loc">
      Mouse location: x, y
    </div>
  </body>
  
  I try to use board as an object. But i failed.
  Thanks for your helps.
  
  A:
  
  Put the assignment to board.onmouseup inside initBoard(), so that it runs after you've assigned the variable.
  function initBoard(w, h){
      board = document.getElementById("board");
      ctx = board.getContext('2d');
      drawBoard(w,h);
      placedBombs();
      board.onmouseup = function(e){
          board.squareSize = {
              w: board.width / 10, 
              h: board.height / 10
          };
  
          board.eventToGrid = function (e) {      
              return {            
                  i: parseInt(e.offsetX / this.squareSize.w), 
                  j: parseInt(e.offsetY / this.squareSize.h)
              };      
          }   
          var pos = board.eventToGrid(e);
          clickedX = pos.i;
          clickedY = pos.j;
          loc = document.getElementById("loc");
          loc.innerHTML = "Position: " + pos.i + ", " + pos.j;
          if(check(clickedX, clickedY) == false){
              lose();
          }
          /*else{
              clickPass();    
          }*/
      }
  }
  
  