title: Codepen : " Uncaught SyntaxError: Unexpected token ( " in browser console when other environments don't throw errors
body: <p>I keep having 
  Uncaught SyntaxError: Unexpected token ( at pen.js:121
  on my code on codepen, which causes it to abort execution, although it is working in Brackets &amp; other editors and other people browsers.</p>
  
  <p>Here is the link : <a href="http://codepen.io/N0bl3/full/EKPYZB/" rel="nofollow">http://codepen.io/N0bl3/full/EKPYZB/</a></p>
  
  <pre><code>/*jshint esnext:true, browser:true*/
  var TICTACTOE = {
    grid: {
      size: 3,
      color: "#000000",
      plays: []
    },
    players: [{
      name: "Cross",
      symbol: "X"
    }, {
      name: "Circle",
      symbol: "O"
    }],
    currentPlayer: 1,
    played: 0,
    drawGrid(ctx) {
  
      for (var i = 0; i &lt;= this.grid.size; i++) {
        ctx.beginPath();
        ctx.strokeStyle = "red";
        ctx.lineWidth = "1";
        ctx.moveTo(0, 200 / 3 * i);
        ctx.lineTo(200, 200 / 3 * i);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(200 / 3 * i, 0);
        ctx.lineTo(200 / 3 * i, 200);
        ctx.stroke();
      }
  
    },
    drawSign(ctx, symbol, x, y) {
      //Canvas draw
      if (symbol === "X") {
        ctx.strokeStyle = "red";
        ctx.lineWidth = "1";
        ctx.beginPath();
        ctx.moveTo(200 / 3 * x, 200 / 3 * y);
        ctx.lineTo(200 / 3 * (x + 1), 200 / 3 * (y + 1));
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(200 / 3 * (x + 1), 200 / 3 * y);
        ctx.lineTo(200 / 3 * x, 200 / 3 * (y + 1));
        ctx.stroke();
      } else {
        ctx.strokeStyle = "green";
        ctx.lineWidth = "1";
        ctx.beginPath();
        ctx.arc(200 / 3 * x + 200 / 3 / 2, 200 / 3 * y + 200 / 3 / 2, 200 / 3 / 2, 0, 2 * Math.PI);
        ctx.stroke();
      }
      alert("Drawing: " + x + " " + y);
    },
    init() {
      var c = document.getElementById("TICTACTOE");
      var ctx = c.getContext("2d");
      this.drawGrid(ctx);
      c.addEventListener("click", function(event) {
        var x = event.clientX;
        var y = event.clientY;
        var sizeSquare = 200 / 3;
        var legal = false;
        if (x &lt; sizeSquare &amp;&amp; y &lt; sizeSquare &amp;&amp; typeof TICTACTOE.grid.plays[0] !== "number") {
          TICTACTOE.grid.plays[0] = TICTACTOE.currentPlayer;
          TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[0]].symbol, 0, 0);
          legal = true;
  
        } else if (x &gt;= sizeSquare &amp;&amp; x &lt; sizeSquare * 2 &amp;&amp; y &lt; sizeSquare &amp;&amp; typeof TICTACTOE.grid.plays[1] !== "number") {
          TICTACTOE.grid.plays[1] = TICTACTOE.currentPlayer;
          TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[1]].symbol, 1, 0);
          legal = true;
  
        } else if (x &gt;= sizeSquare * 2 &amp;&amp; y &lt; sizeSquare &amp;&amp; typeof TICTACTOE.grid.plays[2] !== "number") {
          TICTACTOE.grid.plays[2] = TICTACTOE.currentPlayer;
          TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[2]].symbol, 2, 0);
          legal = true;
  
        } else if (x &lt; sizeSquare &amp;&amp; y &gt;= sizeSquare &amp;&amp; y &lt; sizeSquare * 2 &amp;&amp; typeof TICTACTOE.grid.plays[3] !== "number") {
          TICTACTOE.grid.plays[3] = TICTACTOE.currentPlayer;
          TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[3]].symbol, 0, 1);
          legal = true;
  
        } else if (x &gt;= sizeSquare &amp;&amp; x &lt; sizeSquare * 2 &amp;&amp; y &gt;= sizeSquare &amp;&amp; y &lt; sizeSquare * 2 &amp;&amp; typeof TICTACTOE.grid.plays[4] !== "number") {
          TICTACTOE.grid.plays[4] = TICTACTOE.currentPlayer;
          TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[4]].symbol, 1, 1);
          legal = true;
  
        } else if (x &gt;= sizeSquare * 2 &amp;&amp; y &gt;= sizeSquare &amp;&amp; y &lt; sizeSquare * 2 &amp;&amp; typeof TICTACTOE.grid.plays[5] !== "number") {
          TICTACTOE.grid.plays[5] = TICTACTOE.currentPlayer;
          TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[5]].symbol, 2, 1);
          legal = true;
  
        } else if (x &lt; sizeSquare &amp;&amp; y &gt;= sizeSquare * 2 &amp;&amp; typeof TICTACTOE.grid.plays[6] !== "number") {
          TICTACTOE.grid.plays[6] = TICTACTOE.currentPlayer;
          TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[6]].symbol, 0, 2);
          legal = true;
  
        } else if (x &gt;= sizeSquare &amp;&amp; y &gt;= sizeSquare * 2 &amp;&amp; x &lt; sizeSquare * 2 &amp;&amp; typeof TICTACTOE.grid.plays[7] !== "number") {
          TICTACTOE.grid.plays[7] = TICTACTOE.currentPlayer;
          TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[7]].symbol, 1, 2);
          legal = true;
  
        } else if (x &gt;= sizeSquare * 2 &amp;&amp; y &gt;= sizeSquare * 2 &amp;&amp; typeof TICTACTOE.grid.plays[8] !== "number") {
          TICTACTOE.grid.plays[8] = TICTACTOE.currentPlayer;
          TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[8]].symbol, 2, 2);
          legal = true;
        } else {
          legal = false;
        }
  
        if (legal) {
          TICTACTOE.played++;
          TICTACTOE.checkEnd();
        } else {
          alert("This move is not allowed");
        }
        TICTACTOE.currentPlayer = TICTACTOE.currentPlayer === 1 ? 0 : 1;
        document.getElementById("player").textContent = TICTACTOE.currentPlayer;
      });
    },
    checkEnd() {
      if (this.played &gt;= 5) {
        //Verifier les possibilités gagnantes 0 2 4 fonctionne pourquoi? et 023
        var plays = this.grid.plays;
        if (
          (plays[0] === plays[1] &amp;&amp; plays[1] === plays[2] &amp;&amp; typeof plays[0] === "number") ||
          (plays[0] === plays[4] &amp;&amp; plays[4] === plays[8] &amp;&amp; typeof plays[0] === "number") ||
          (plays[0] === plays[3] &amp;&amp; plays[3] === plays[6] &amp;&amp; typeof plays[0] === "number") ||
          (plays[1] === plays[4] &amp;&amp; plays[4] === plays[7] &amp;&amp; typeof plays[1] === "number") ||
          (plays[2] === plays[4] &amp;&amp; plays[4] === plays[6] &amp;&amp; typeof plays[2] === "number") ||
          (plays[2] === plays[5] &amp;&amp; plays[5] === plays[8] &amp;&amp; typeof plays[2] === "number") ||
          (plays[3] === plays[4] &amp;&amp; plays[4] === plays[5] &amp;&amp; typeof plays[3] === "number") ||
          (plays[6] === plays[7] &amp;&amp; plays[7] === plays[8] &amp;&amp; typeof plays[6] === "number")
        ) {
          alert("The winner is: " + this.players[this.currentPlayer].name);
          window.location.reload();
        } else if (this.played &gt;= 9) {
          alert("Match end! No one wins this time!");
          window.location.reload();
        }
      }
    }
  };
  document.getElementById("player").textContent = TICTACTOE.currentPlayer;
  TICTACTOE.init();
  </code></pre>
  
  <p>&amp; the HTML :</p>
  
  <pre><code>&lt;canvas id="TICTACTOE" width="200" height="200"&gt;Your browser doesn't support HTML 5 canvas. Consider upgrading or changing your browser&lt;/canvas&gt;
  &lt;p&gt;Hello!&lt;/p&gt;
  &lt;p id="player"&gt;&lt;/p&gt;
  </code></pre>
  
  <p>What is wrong?
  Thanks.</p>