Atölye › Wordle Tarzı Kelime Tahmini › 9/26. adım
Yazdıkların görünmeli: harfler ilk satırın karelerine, büyük harfle ve ortalanarak yazılsın. Harfi olan karenin çerçevesi de biraz parlasın; nerede olduğunu hemen gör.
```js
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
for (let row = 0; row < TRIES; row++) {
const letters = row === 0 ? current : ''
ctx.strokeStyle = letters[i] ? '#a1a1aa' : '#3f3f46'
if (letters[i]) {
ctx.fillStyle = 'white'
ctx.font = 'bold 28px sans-serif'
ctx.fillText(letters[i].toUpperCase(), x + SIZE / 2, y + SIZE / 2 + 1)
}
```ctx.textAlign = 'center' ve ctx.textBaseline = 'middle' → yazı verilen noktaya yatayda ve dikeyde ortalanır.
Bir kez, döngülerden önce ayarlanır.const letters = row === 0 ? current : '' → bu satırda gösterilecek harfler: ilk satırda yazdıkların, diğerlerinde
hiçbir şey (şimdilik).letters[i] → yazının i. harfi (yazılarda da köşeli parantez çalışır). Harf yoksa undefined gelir; if onu
"yanlış" sayar.letters[i] ? '#a1a1aa' : '#3f3f46' → harf varsa açık gri çerçeve, yoksa koyu.ctx.fillText(letters[i].toUpperCase(), x + SIZE / 2, y + SIZE / 2 + 1) → harfi büyük harfe çevirip karenin
ortasına yazar (+1 piksel: harfler göze biraz yukarıda durur).draw içinde ctx.fillRect(...) satırının hemen altına (boş satır bırakmadan) iki yazı ayarını yaz.for (let row = 0; ...) { satırının altına const letters = ... satırını yaz.ctx.strokeStyle = '#3f3f46' satırını ctx.strokeStyle = letters[i] ? '#a1a1aa' : '#3f3f46' yap.strokeRect satırının altına if (letters[i]) { ... } bloğunu yaz.Beceriler: Canvas üzerine çizim