Atölye › 15 Bulmacası › 8/27. adım
Taşın numarası olmalı. Koyu, kalın bir sayı, tam ortada.
Yazı yazmak da çizim gibi: önce renk, yazı tipi ve hiza, sonra fillText. Bu kez yazıyı iki yönde de ortalayacağız.
```js
function drawTile(number, x, y) {
ctx.fillStyle = '#f59e0b'
ctx.fillRect(x, y, SIZE, SIZE)
ctx.fillStyle = '#1c1917'
ctx.font = 'bold 36px sans-serif'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText(String(number), x + SIZE / 2, y + SIZE / 2 + 2)
}
```ctx.fillStyle = '#1c1917' → koyu yazı rengi. ctx.font = 'bold 36px sans-serif' → kalın, 36 piksel.ctx.textAlign = 'center' → yazının yatay ortası verilen x'e gelir.ctx.textBaseline = 'middle' → yazının dikey ortası verilen y'ye gelir.x + SIZE / 2, y + SIZE / 2 → taşın tam ortası (kenarın yarısı: 45 piksel). + 2 → rakamlar göze biraz yukarıda
durduğu için 2 piksel aşağı iteriz.String(number) → sayıyı yazıya çevirir: 1 → '1'. fillText yazı bekler.drawTile içinde ctx.fillRect(x, y, SIZE, SIZE) satırının altına beş satırı yaz. Çalıştır: turuncu taşın
ortasında 1 görmelisin.
Beceriler: Canvas üzerine çizim