Q:

Remove the last graphic placed on a canvas but keep getting getContext is not a function

I'm new to JavaScript and this is my first time using HTML5 canvas so please excuse if this is a simple fix. 
I've created a Tic Tac Toe game using canvases where a png or SVG is placed at each click of a canvas square.  I'm trying to create an undo button now, where the last move made can be removed.  I'm trying to use the clearRect() function to remove the graphic, and while the graphic does disappear, the console shows the error "Uncaught TypeError: box.getContext is not a function"...this is weird because I don't get this error when I use "box.getContext" to place the graphic in the first place. 
Not only that, when I try to click the cleared canvas square again after that, it does not allow for a graphic to be placed...any ideas as to why this is happening? 
(By the way, I'm using a png for the X and an SVG for the O just for practice with each type of graphic)
Here is my JS:
window.onload = function() {
  var num;
  var box;
  var ctx;
  var turn = 1;
  var filled;
  var symbol;
  var winner;
  var gameOver = false;

  filled = [false, false, false, false, false, false, false, false, false];
  symbol = ["", "", "", "", "", "", "", "", ""];
  winner = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];

  //canvas click + retrieving the box's number
  document.getElementById("tic").addEventListener("click", function(e) {
    boxClick(e.target.id);
  });

  function boxClick(numId) {
    box = document.getElementById(numId);
    ctx = box.getContext("2d"); /*here is where I'm getting the error*/

    switch (numId) {
      case "square1":
        num = 1;
        break;
      case "square2":
        num = 2;
        break;
      case "square3":
        num = 3;
        break;
      case "square4":
        num = 4;
        break;
      case "square5":
        num = 5;
        break;
      case "square6":
        num = 6;
        break;
      case "square7":
        num = 7;
        break;
      case "square8":
        num = 8;
        break;
      case "square9":
        num = 9;
        break;
    }

    //drawing the shapes on the canvases (switch to 0 indexing later)
    if (filled[num - 1] == false) {
      if (gameOver == false) {
        if (turn % 2 ! = 0) {
          var sean_image = new Image();
          sean_image.src = "graphics/sean.png";
          sean_image.onload = function() {
            ctx.drawImage(sean_image, -43, -26);
          };
          symbol[num - 1] = "X";
        } else {
          //if number is even (O player)
          var square_svg = new Image();
          square_svg.src = "graphics/square.svg";
          square_svg.onload = function() {
            ctx.drawImage(square_svg, 8.5, 8.5);
          };
          symbol[num - 1] = "O";
        }

/* ***this is where I'm trying to implement the undo function */
        //undo the last move made
        document.getElementById("undo").onclick = function() {
          ctx.clearRect(0, 0, box.width, box.height);
          filled[num - 1] == false;
          symbol[num - 1] = "";
        };
      } 
    } 
  }
};

Here is my HTML:
<! DOCTYPE html>
<html>
  <head>
    <title>Tic Tac Toe</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="ticTacToe.css" />
  </head>
  <body>
    <header>
      <h1 id="head">Tic Tac Toe Game</h1>
    </header>
    <h1 id="result"></h1>

    <section id="game">
      <div id="tic">
        <canvas id="square1" width="100" height="100"></canvas>
        <canvas id="square2" width="100" height="100"></canvas>
        <canvas id="square3" width="100" height="100"></canvas><br />

        <canvas id="square4" width="100" height="100"></canvas>
        <canvas id="square5" width="100" height="100"></canvas>
        <canvas id="square6" width="100" height="100"></canvas><br />

        <canvas id="square7" width="100" height="100"></canvas>
        <canvas id="square8" width="100" height="100"></canvas>
        <canvas id="square9" width="100" height="100"></canvas>

        <button id="undo">Undo Move</button>
      </div>
    </section>

    <script type="text/javascript" src="ticTacToe.js"></script>
  </body>
</html>

A:

This is due to the fact that you're attaching a click event listener to your div with the id of tic.  So if you click anything inside of that tic div, that event listener will fire.  Because the undo button is inside of the tic div, when it is clicked, that event listener will fire and e.target will represent that undo button which was clicked.  Because that undo button is not a canvas element, the getContext method will not work properly on it and you'll get that error. 
So, you should move that button element outside of the div with id=tic.  I would place it right below the tic div.