+<!DOCTYPE html>
+<html>
+<head>
+<title> Chess Board</title>
+</head>
+
+<body>
+
+<canvas id="myCanvas" width="560" height="560" style="border:2px solid #d3d3d3;">
+Your browser does not support the HTML5 canvas tag.
+TODO: describe chessboard ?
+</canvas>
+
+<script>
+
+// TODO: draw hexagonal board, allow click and drag pieces
+// ==> work with coordinates and current board size as a parameter
+
+var c=document.getElementById("myCanvas");
+var ctx=c.getContext("2d");
+
+for(i=0;i<8;i++)
+{for(j=0;j<8;j++)
+{ctx.moveTo(0,70*j);
+ctx.lineTo(560,70*j);
+ctx.stroke();
+
+ctx.moveTo(70*i,0);
+ctx.lineTo(70*i,560);
+ctx.stroke();
+var left = 0;
+for(var a=0;a<8;a++) {
+ for(var b=0; b<8;b+=2) {
+ startX = b * 70;
+ if(a%2==0) startX = (b+1) * 70;
+ ctx.fillRect(startX + left,(a*70) ,70,70);
+ }}
+}}
+
+var img = new Image();
+img.onload = function() {
+ ctx.drawImage(img, 0, 0, 60, 60);
+}
+img.src = "public/images/pieces/wb.svg";
+
+
+</script>
+
+</body>
+</html>