diff --git a/grid.html b/grid.html
new file mode 100644
index 0000000..0eb8684
--- /dev/null
+++ b/grid.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
diff --git a/grid.js b/grid.js
new file mode 100644
index 0000000..c94c2d3
--- /dev/null
+++ b/grid.js
@@ -0,0 +1,91 @@
+const cellSize = 150;
+const size = cellSize * 3;
+const margin = 10;
+
+let ctx = undefined;
+let initialPos = undefined;
+let circle = true;
+
+function resizeCanvas() {
+ ctx.canvas.width = window.innerWidth;
+ ctx.canvas.height = window.innerHeight;
+}
+
+function drawGrid() {
+ ctx.strokeStyle = "white";
+ ctx.lineWidth = 5;
+
+ for (let x = 1; x < 3; ++x) {
+ ctx.moveTo(initialPos.x + x * cellSize, 0 + initialPos.y);
+ ctx.lineTo(initialPos.x + x * cellSize, initialPos.y + size);
+ }
+
+ for (let y = 1; y < 3; ++y) {
+ ctx.moveTo(initialPos.x + 0, initialPos.y + y * cellSize);
+ ctx.lineTo(initialPos.x + size, initialPos.y + y * cellSize);
+ }
+
+ ctx.stroke();
+}
+
+
+function drawCircle(x, y) {
+ ctx.beginPath();
+ // arc(x, y, radius, startAngle, endAngle)
+ ctx.arc(x, y, 50, 0, Math.PI * 2);
+ ctx.stroke();
+}
+
+function drawCross(x, y) {
+ startPoint = { x: x-50, y: y-50 };
+ ctx.beginPath();
+ ctx.moveTo(startPoint.x, startPoint.y);
+ ctx.lineTo(startPoint.x + 100, startPoint.y + 100);
+ ctx.moveTo(startPoint.x + 100, startPoint.y);
+ ctx.lineTo(startPoint.x, startPoint.y + 100);
+ ctx.stroke();
+}
+
+function init() {
+ const canvas = document.getElementById("canvas");
+ if (canvas.getContext) {
+ ctx = canvas.getContext("2d");
+ resizeCanvas(ctx); // Init canvas
+ ctx.fillStyle = "red";
+
+ initialPos = {
+ x: ctx.canvas.width / 2 - size / 2,
+ y: ctx.canvas.height / 2 - size / 2
+ };
+
+ ctx.fillRect(initialPos.x, initialPos.y, 5, 5); // origin of grid
+
+ canvas.addEventListener("click", (evt) => {
+ const {clientX, clientY} = evt;
+ // Coord relative to origin of the grid (initialPos)
+ const pt = { x: clientX - initialPos.x, y: clientY - initialPos.y };
+ const gridIndex = {
+ x: Math.floor(3 * pt.x / size),
+ y: Math.floor(3 * pt.y / size)
+ };
+ if (gridIndex.x >= 0 && gridIndex.x <= 2 && gridIndex.y >= 0 && gridIndex.y <= 2) {
+ ctx.fillStyle = "blue";
+ const center = {
+ x: initialPos.x + gridIndex.x * cellSize + cellSize/2,
+ y: initialPos.y + gridIndex.y * cellSize + cellSize/2
+ };
+ if (circle) drawCircle(center.x, center.y);
+ else drawCross(center.x, center.y);
+ circle = !circle;
+ }
+ });
+
+ //window.addEventListener('resize', () => resizeCanvas(ctx));
+ //window.requestAnimationFrame(time => update(ctx, time))
+
+ drawGrid(ctx);
+ }
+}
+
+init();
+