Workshop › Candy Crush-style Match 3 › Step 5 of 29
Each gem is a filled circle in the middle of its square, in the color its number points to.
```js
const gem = board[r][c]
ctx.fillStyle = COLORS[gem]
ctx.beginPath()
ctx.arc(x + SIZE / 2, y + SIZE / 2, SIZE / 2 - 6, 0, Math.PI * 2)
ctx.fill()
```COLORS[gem] turns the number into a color.arc(x, y, radius, start, end) plans a circle; Math.PI * 2 is a full turn. The centre is the middle of the
square and the radius 18 leaves a 6-pixel margin.fill() fills the planned circle.In draw, inside the inner loop, under ctx.fillRect(x, y, SIZE, SIZE), write the five lines.
Skills: Drawing on a canvas
← A board of random gems Start without matches →