Workshop › Chess › Step 1 of 48
Build a complete chess game and a computer that plays it. Move patterns as data, check found by looking outwards from the king, legal moves by trying and taking back, castling, en passant, promotion, checkmate, and a minimax search with alpha-beta pruning.
Everything in this game is drawn on the page's <canvas>. We find it, take its 2D drawing context, and paint the
whole canvas dark in a draw function: the table the chess board will lie on.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
function draw() {
ctx.fillStyle = '#1c1917'
ctx.fillRect(0, 0, canvas.width, canvas.height)
}
draw()
```document.getElementById('game') finds the canvas; getContext('2d') gives the object with the drawing commands.fillStyle picks the fill color, fillRect(x, y, width, height) fills a rectangle. (0, 0) is the top-left
corner; x grows to the right and y grows down.draw() at the bottom runs the function once.Write the code under the three comment lines, then press Run.
Skills: Drawing on a canvas