Draw squares

2021-05-26 19:39:08 +02:00
parent d3001a66d5
commit dab3b1798b
2 changed files with 16 additions and 1 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,6 +5,7 @@
  <title>Chess</title>
 </head>
 <body>
+  <canvas id="chessBoard" width="600" height="600"></canvas>
  <script src="main.js"></script>
 </body>
 </html>
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -1 +1,15 @@
-console.log("Hello World!");
+var _canvas = document.getElementById("chessBoard");
+
+function drawChessBoard(canvas) {
+  let ctx = canvas.getContext("2d");
+  let w = canvas.width;
+  let h = canvas.height;
+  ctx.fillStyle = '#c0c0c0';
+  for (let r = 0; r < 8; r++) {
+    for (let c = 0; c < 8; c++) {
+      if ((r + c) % 2) ctx.fillRect(w/8*r, h/8*c, w/8, h/8);
+    }
+  }
+}
+
+drawChessBoard(_canvas);