var button = []; //stores the canvases
for(var i=1; i<10; i++) button[i] = document.getElementById('canvas'+i);

var ctx = []; //stores the context of the canvases
for(var i=1; i<10; i++) ctx[i] = button[i].getContext('2d');

var bDisabled = []; //stores the availability of the button
for(var i=1; i<10; i++) bDisabled[i] = false; //all buttons are enabled in the beginning

var isResult = false;
var content = [];

function loop(x)
{
    if(!bDisabled[x]){ //button does not currently contain X or O and therefore is enabled.
        bDisabled[x] = true; //button now contains something
        console.log("Button pressed.");
        content[x] = 'x';
        
        button[x].style.webkitTransform = "rotateY(180deg)";

        setTimeout(function(){
            ctx[x].lineWidth = 3;
            ctx[x].beginPath();
            ctx[x].moveTo(10, 10);
            ctx[x].lineTo(90, 90);
            ctx[x].moveTo(90, 10);
            ctx[x].lineTo(10, 90);
            ctx[x].stroke();
            ctx[x].closePath();
        }, 300);

    }
}
@@ -410,16 +410,52 @@
  = %5B%5D;%0A%0A
+var xTurn = true; //X:true O:false%0A%0A
 function
@@ -754,16 +754,24 @@
 0deg)%22;%0A
+        
 %0A       

create variable to store whose turn it is