First, a (proper) HTML document looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Tic tac toe</title>
</head>
<body>
<!-- Stuff -->
</body>
</html>
Html, head, body, and title are strongly recommended, tho not requirednot required.
You seem to be using <canvas>s a lot… why? Can't you just make them images?
<div class="row">
<img class="field" />
<img class="field" />
<img class="field" />
</div>
<div class="row">
<img class="field" />
<img class="field" />
<img class="field" />
</div>
<div class="row">
<img class="field" />
<img class="field" />
<img class="field" />
</div>
Canvases are ugly and pixely, images are beautiful and potentially vector (or at least easier to make high-res (important for retina devices)). The only downside is you have to create the images… but I just did it for you (tweak to your liking):
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="#f00"> <!-- An X -->
<polygon points="0,4 4,0 50,46 46,50" />
<polygon points="50,4 4,50 0,46 46,0" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" stroke="#090" stroke-width="5" fill="none"> <!-- An O -->
<circle cx="25" cy="25" r="22" />
</svg>
Don't make a bajillion ids. Instead of $('canvas#f' + rowId + colId):
document.getElementById('container').children[rowId].children[colId]
Yeah, I hate jQuery. Especially the animations. CSS transitions are supported wide enough that you should probably use that instead. It's smoother - the DOM isn't meant to be messed around with every 20ms (as is the case with jQuery animations).
So, pretty good job for recent unzoomed desktop browsers with users who can't notice jQuery's slowness. Now just make it vector and vanilla and not have a bunch of… things in the DOM (ids, "tokens" (invalid attribute)) which can be put in arrays.
