Wilfred · December 20, 2010 19:39
diff --git a/Skatol' b/Skatol'

 <!doctype html>
 <html>

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>

 <body>
 <p>Hello world</p>

 <canvas id="main" width="800" height="600">
 Your browser doesn't support canvas.
 </canvas>

 <script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 <script type="text/javascript" src="skatol.js">
 </script>

 </body>

 </html>

 function drawBoard(board) {
    for (var i=0; i<4; i++) {
 	for (var j=0; j<4; j++) {
 	    drawBoardElement(board[i][j], i, j);
 	}
    }

 }

 function drawBoardElement(letter, x, y) {
    var canvas = $('#main')[0];
    var context = canvas.getContext('2d');

    context.fillStyle = "rgb(0,0,0)"
    roundRect(context, x*80, y*80, 60, 60, 10, false, true);


    context.textAlign = 'center';
    // context.textBaseline = 'middle';
    context.font = '50px sans-serif';

    context.fillText(letter, x*80+30, y*80+50);
 }

 function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
    if (typeof stroke == "undefined" ) {
 	stroke = true;
    }
    if (typeof radius === "undefined") {
 	radius = 5;
    }
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.closePath();
    if (stroke) {
 	ctx.stroke();
    }
    if (fill) {
 	ctx.fill();
    }        
 }

 var alphabet = new Array('a', 'b', 'c', 'ĉ', 'd', 'e', 'f', 'g', 'ĝ', 'h', 'ĥ',
 			 'i', 'j', 'ĵ', 'k', 'l', 'm', 'n', 'o', 'p', 'r', 's',
 			 'ŝ', 't', 'u', 'ŭ', 'v', 'z');

 var board = new Array([], [], [], []);
 for (var i=0; i<4; i++) {
    for (var j=0; j<4; j++) {
 	board[i][j] = alphabet[Math.floor(Math.random()*28)];
    }
 }

 drawBoard(board);

 var canvas = $('#main')[0]

 $('#main').click(function(e) {
 	var offset = $(this).offset();
 	var x = e.clientX - offset.left;
 	var y = e.clientY - offset.top;
 	alert("x:" + x + " y:" + y);}, false);

	<!doctype html>
	<html>

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</head>

	<body>
	<p>Hello world</p>

	<canvas id="main" width="800" height="600">
	Your browser doesn't support canvas.
	</canvas>

	<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="skatol.js">
	</script>

	</body>

	</html>

	function drawBoard(board) {
	for (var i=0; i<4; i++) {
	for (var j=0; j<4; j++) {
	drawBoardElement(board[i][j], i, j);
	}
	}

	}

	function drawBoardElement(letter, x, y) {
	var canvas = $('#main')[0];
	var context = canvas.getContext('2d');

	context.fillStyle = "rgb(0,0,0)"
	roundRect(context, x80, y80, 60, 60, 10, false, true);


	context.textAlign = 'center';
	// context.textBaseline = 'middle';
	context.font = '50px sans-serif';

	context.fillText(letter, x80+30, y80+50);
	}

	function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
	if (typeof stroke == "undefined" ) {
	stroke = true;
	}
	if (typeof radius === "undefined") {
	radius = 5;
	}
	ctx.beginPath();
	ctx.moveTo(x + radius, y);
	ctx.lineTo(x + width - radius, y);
	ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
	ctx.lineTo(x + width, y + height - radius);
	ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
	ctx.lineTo(x + radius, y + height);
	ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
	ctx.lineTo(x, y + radius);
	ctx.quadraticCurveTo(x, y, x + radius, y);
	ctx.closePath();
	if (stroke) {
	ctx.stroke();
	}
	if (fill) {
	ctx.fill();
	}
	}

	var alphabet = new Array('a', 'b', 'c', 'ĉ', 'd', 'e', 'f', 'g', 'ĝ', 'h', 'ĥ',
	'i', 'j', 'ĵ', 'k', 'l', 'm', 'n', 'o', 'p', 'r', 's',
	'ŝ', 't', 'u', 'ŭ', 'v', 'z');

	var board = new Array([], [], [], []);
	for (var i=0; i<4; i++) {
	for (var j=0; j<4; j++) {
	board[i][j] = alphabet[Math.floor(Math.random()*28)];
	}
	}

	drawBoard(board);

	var canvas = $('#main')[0]

	$('#main').click(function(e) {
	var offset = $(this).offset();
	var x = e.clientX - offset.left;
	var y = e.clientY - offset.top;
	alert("x:" + x + " y:" + y);}, false);