holodepth

HTML5 Canvas · Canvas API & context

2D context: çizim kalemi ve boyama sözleşmesi

getContext('2d') ile aldığınız nesne, bitmap üzerinde çalışan çizim arayüzüdür. Canvas öğesi kağıdı temsil eder; CanvasRenderingContext2D ise o kağıda kalemle yazan eldir. Önceki sayfada yüzeyi ve boyutunu sabitledik; burada «ilk karede ne çizerim, hangi renk ve kalınlıkla, nasıl temizlerim?» sorularının cevabını, path/animasyon/koordinat dönüşümüne girmeden netleştiririz.

Bu sayfa anlık mod (immediate mode) 2D API'sinin günlük yüzeyini anlatır. Karmaşık yollar, eğriler ve birleştirme kuralları «Çizim & path» klasöründe; koordinat ekseni ve transform ayrı başlıktadır — burada bilinçli olarak onlara sadece kapı açıyoruz.

Özet: 2D bağlamın ana hatları

Kavram Ne yapar? Bu sayfada
Context Bitmap'e çizim komutları gönderir Referans tutma, null kontrolü
Fill / stroke İçi boyama vs kontur çizgisi fillStyle, strokeStyle, kalınlık
Temizleme Piksel verisini sıfırlar veya şeffaflaştırır clearRect; döngüde «önce temizle» disiplini
Path Çokgen, yay, serbest şekil Yalnızca giriş; ayrıntı path-system sayfasında
Durum Stil ve dönüşüm yığını save/restore fikri; derinlik state-system'de

Context nedir — canvas'tan farkı

DOM'daki <canvas> öğesi, tarayıcıya «şu kadar piksel ayır» der; içindeki piksel dizisi siz komut verene kadar çoğu zaman şeffaftır. CanvasRenderingContext2D ise bu diziye komut gönderen nesnedir: dikdörtgen boya, çizgi çek, metin yaz, görüntü yapıştır. Aynı canvas'ta bağlamı her karede yeniden almak yerine, proje boyunca tek bir ctx referansı tutmak yaygın ve doğrudur.

2D bağlam anlık mod çalışır: her fillRect veya stroke çağrısı bitmap'i hemen günceller; «şekil listesi» bellekte ayrı tutulmaz. Bu, SVG veya sahne grafiği motorlarından farklı bir zihinsel modeldir — hata ayıklarken «komutu verdim ama görünmüyor» çoğu zaman stil, koordinat veya temizleme sırasından kaynaklanır, gizli bir katman değil.

Holodepth sırasında: Canvas oluşturma yüzeyi kurar; bu sayfa kalemi tanıtır; Koordinat sistemi ekseni ve translate/rotate ile oynar; State sistemi yığını derinleşir.

Bağlamı almak ve saklamak

Önceki sayfadaki örnekte olduğu gibi const ctx = canvas.getContext('2d') yeterli; burada vurgu, bağlamı modül veya sınıf ömrü boyunca taşımaktır. Her requestAnimationFrame geri çağrısında yeniden getContext çağırmak gereksizdir; canvas öğesi değişmedikçe aynı nesne geçerlidir. 

/** @type {HTMLCanvasElement} */
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
if (!ctx) {
  throw new Error('2D context alınamadı.');
}

// Proje boyunca ctx kullanılır; canvas boyutu değişince width/height güncellemesi
// resize-logic sayfasındaki kalıpla birlikte düşünülür.
export { canvas, ctx };

TypeScript kullanıyorsanız CanvasRenderingContext2D tipi otomatik tamamlanır; saf JavaScript'te yine de null kontrolü üretim disiplinidir. Bağlam alındıktan sonra canvas öğesini DOM'dan kaldırırsanız çizim davranışı tanımsızlaşabilir — yaşam döngüsünü canvas oluşturma sayfasındaki gibi birlikte planlayın.

Fill, stroke ve görünür stil

Renk ve saydamlık

fillStyle kapalı şekillerin içini, strokeStyle kontur çizgisini boyar. Değer olarak CSS renk dizgisi ('#2ee7f2', 'rgba(46,231,242,0.6)'), CanvasGradient veya CanvasPattern verilebilir. globalAlpha ise o andan sonraki tüm çizimlere uygulanan çarpan gibidir (0 tam şeffaf, 1 opak) — katmanlı efekt için kullanışlıdır, fakat «her şey soluk» şikâyetine de yol açar.

Çizgi kalınlığı ve uçlar

lineWidth piksel cinsinden kontur kalınlığıdır; lineCap ( butt, round, square) ve lineJoin ( miter, round, bevel) köşe ve uç görünümünü belirler. İnce çizgilerde lineWidth = 1 ve yarım piksel kayması ( koordinat hizalama ile birlikte) bulanıklık üretebilir — bu sayfada stil var, hizalama sonraki başlıkta. 

ctx.fillStyle = '#1a1f2e';
ctx.strokeStyle = '#2ee7f2';
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.globalAlpha = 0.92;

Dikdörtgen, temizleme ve ilk kare

En sık kullanılan komutlardan üçü: fillRect(x, y, w, h) dolu dikdörtgen, strokeRect yalnızca kenar, clearRect belirtilen bölgeyi şeffaf yapar (pikseli «sıfırlar»). Animasyonlu sahnede çoğu karede önce tüm yüzeyi clearRect(0, 0, canvas.width, canvas.height) ile temizleyip sonra güncel durumu yeniden çizmek standart kalıptır — ayrıntılı döngü disiplini Clear & redraw sayfasında.

clearRect ile fillRect (opak arka plan rengi) farklıdır: ilki şeffaflık bırakır, ikincisi pikseli boyar. Yarı saydam arka plan istiyorsanız düşük globalAlpha ile fill veya rgba rengi kullanın; «önceki kare izi kalmasın» için yine de her karede temizlik gerekir.

Playground'da clearRect kutusunu kapatınca trail / smear oluşur; açıkken standart animasyon döngüsünü simüle eder. 

function drawFrame(ctx, canvas) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = '#121820';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.strokeStyle = '#5ec8ff';
  ctx.lineWidth = 2;
  ctx.strokeRect(40, 40, 120, 80);
}

Path: bu sayfanın sınırı

Dördüncü bölümdeki fillRect ve strokeRect doğrudan bitmap'e yazar; arada «yol» katmanı yoktur. Üçgen, ok ucu, grafik çizgisi veya serbest silüet için önce yol (path) kurulur, sonra aynı fillStyle / strokeStyle ile fill() veya stroke() çağrılır. Yol, henüz piksele dönüşmemiş geçici bir kontur tanımıdır; dolgu ile konturun görsel farkı ve kural seti Stroke vs fill sayfasında kalır — burada yalnızca «dikdörtgen dışı her şey bu kalıba girer» çerçevesini sabitliyoruz.

İki aşama: kur, sonra boya

Zihinsel model şöyledir: beginPath() yeni bir yol oturumunu açar; moveTo kalemi taşır (çizgi çizmez), lineTo ve arc konturu genişletir. closePath() son noktayı başlangıca bağlar. Ancak fill() veya stroke() dediğinizde — ve yalnızca o anda — yol bitmap'e uygulanır. Aynı yolu önce dolgu, sonra kontur ile iki kez boyamak mümkündür; stil her çağrıdan önce güncellenir (üçüncü bölümdeki fillStyle / strokeStyle ayrımı burada da geçerlidir).

fillRect ile path arasındaki pratik fark: dikdörtgen komutları path yığınını karıştırmaz; karmaşık şekil çizerken her figürden önce beginPath() alışkanlığı şarttır. Aksi halde önceki köşeler yeni şekle «yapışır» — bu «birleşik yol» davranışının ayrıntısı Path sistemi sayfasında. 

ctx.beginPath();
ctx.moveTo(80, 40);
ctx.lineTo(140, 120);
ctx.lineTo(20, 120);
ctx.closePath();
ctx.fillStyle = '#2ee7f2';
ctx.fill();
ctx.strokeStyle = '#e8f4ff';
ctx.lineWidth = 2;
ctx.stroke();

Bu sayfada kalmayan path konuları

Yay parametreleri, Bézier eğrileri, yön kuralları (winding), fillRule (nonzero / evenodd) ve alt yol birleştirme «Çizim & path» hattında işlenir. Buradan çıkarken elinizde şu cümle kalsın: önce yol, sonra fill veya stroke; her yeni şekil için beginPath.

Görüntü ve metin: kısa kapı

Dördüncü bölümde çizdiğiniz dikdörtgen ve beşinci bölümde kurduğunuz yol, bağlamın vektör yüzünüdür. drawImage ise hazır bir piksel kaynağını (yüklenmiş HTMLImageElement, başka bir canvas veya video karesi) hedef dikdörtgene kopyalar. «Şekli komutla üret» ile «hazır görseli yapıştır» ayrımı, 2D bağlamın iki temel giriş yoludur; sprite atlası, atlama ve bellek yönetimi Image loading sayfasında kalır.

drawImage: blit düşüncesi

En sık kullanılan imza, kaynağı hedef konuma yerleştirmektir; kaynak ve hedef dikdörtgen boyutları farklıysa tarayıcı ölçekler. Bu, vektör çizimden bağımsız bir işlemdir: önce asset yüklenmiş olmalıdır (yükleme tamamlanmadan çizim boş veya titrek görünür). Çapraz kaynak görsellerinde bitmap «kirlenmiş» sayılabilir; okuma işlemleri kısıtlanır — güvenlik ve crossOrigin ayrıntısı image loading hattında, burada yalnızca «kaynak hazır mı?» sorusunu hatırlatıyoruz.

imageSmoothingEnabled ve imageSmoothingQuality, tıpkı fillStyle gibi bağlam özelliğidir: bir kez ayarlanır, sonraki drawImage çağrılarına uygulanır. Piksel sanatında yumuşatma genelde kapatılır; fotoğraf veya UI ölçeğinde high kalite tercih edilebilir.

Metin: font ve hizalama bağlamda

ctx.font CSS font kısa yazımıdır ('600 16px DM Sans, sans-serif'). fillText ve strokeText, path'teki gibi önce stil sonra uygulama kalıbını izler; metin de bitmap'e anlık yazılır. textAlign ve textBaseline referans noktasını belirler — eksen ve dönüşümle birlikte düşünmek Koordinat sistemi sayfasına bağlanır.

Skor, can barı veya kısa etiket için canvas metni yeterlidir; seçilebilir paragraf, form ve erişilebilirlik gerektiren arayüzde çoğu ekip DOM katmanını tercih eder. Karar «hangi API daha uygun?» sorusudur; Holodepth GUI içeriği DOM tarafını, bu sayfa ise «ctx ile de yazılabilir» sınırını çizer.

  • Vektör (rect, path, metin) komutla üretilir; drawImage hazır piksel kopyalar.
  • Asset yüklenmeden drawImage güvenilir sonuç vermez.
  • imageSmoothing* bağlam özelliğidir; proje stiline göre bir kez ayarlayın.
  • Uzun metin ve erişilebilirlik için çoğu zaman DOM katmanı düşünülür.

Birleştirme modu ve durum yığını

Üçüncü bölümde fillStyle değiştirdiğinizde, sonraki tüm dolgu komutları yeni rengi kullanır — bağlam kalıcı durum taşır. globalCompositeOperation da aynı ailede: bir sonraki çizimlerin mevcut piksellerle nasıl karışacağını tanımlar. Varsayılan source-over üstüne boyamadır; lighter parlaklık ekler, destination-out delik açar gibi düşünülebilir. Tam mod listesi, maskeleme örnekleri ve performans Composite operations sayfasında; burada «karışım modu da stil gibi ctx üzerinde durur» bilgisi yeterli.

save / restore: geçici stil ve dönüşüm

save() o anki bağlam durumunun anlık görüntüsünü yığına iter: fillStyle, lineWidth, globalAlpha, globalCompositeOperation, dönüşüm matrisi ve kırpma bölgesi dahil. restore() bir önceki kaydı geri yükler. Tek bir düğümü çizmek için rengi değiştirip sonra eski haline dönmek istediğinizde, her özelliği elle sıfırlamak yerine save → değiştir → çiz → restore kalıbı okunaklıdır.

İç içe save çağrıları yığın derinliği oluşturur; her restore bir katman kaldırır. Eşleşmeyen save/restore hataları sessizce birikir — «neden globalAlpha 0.2 kaldı?» sorusunun kaynağı çoğu zaman unutulan restore'dur. Yığın tablosu, kırpma ( clip) ve hata önleme State sistemi sayfasına bırakılır. 

ctx.save();
ctx.fillStyle = '#ff6b6b';
ctx.globalAlpha = 0.85;
ctx.fillRect(hoverX, hoverY, 48, 48);
ctx.restore();
// restore sonrası fillStyle ve globalAlpha önceki değerlere döner

Composite ve state: bu sayfadaki özet

Stil özellikleri ve birleştirme modu sonraki komutlara taşınır; geçici değişiklik için save/restore kullanın. Dönüşüm ( translate, rotate) da aynı yığına girer — koordinat sayfası ekseni anlatır, state sayfası yığını derinleştirir. Üçü birlikte «bir karede ctx'in tam hali» sorusunu yanıtlar.

2D Context Playground ile fill/stroke, clearRect izi, path adımları, drawImage ve composite modunu canlı deneyin.

clear · redraw

Render sequence

  • clearRect()
  • fillRect()
  • save()
  • strokeRect()
  • beginPath()
  • moveTo()
  • lineTo()
  • closePath()
  • fill()
  • stroke()
  • drawImage()
  • restore()
2D Context Playground: Immediate mode — her komut bitmap'e doğrudan yazar. clearRect kapatıldığında izler birikir; save/restore geçici alpha ile gösterilir; path adımları ve composite modu canlı sırayla vurgulanır. Çözünürlük deneyi için Canvas Resolution Lab.

Three.js / WebGL ile çakışmadan okumak

Çakışmayı önleyen çerçeve

Three.js sahnesi WebGL bağlamında çalışır; 2D HUD için ayrı bir canvas ve getContext('2d') kullanmak yaygın bir üretim kalıbıdır. Aynı canvas'ta hem WebGL hem 2D bağlam karıştırmak yerine iki yüzey veya net aşama ayrımı tercih edin. 2D bağlamdaki «her kare temizle ve yeniden çiz» düşüncesi, Three'teki renderer.clear ile aynı disiplinin düşük seviye karşılığıdır — API farklı, soru aynı: «bu karede bitmap'e ne yazılıyor?»

  • ctx bir kez alındı mı, null kontrolü yapıldı mı?
  • fill ve stroke ayrımı doğru mu?
  • Animasyonda clearRect her karede mi?
  • Karmaşık şekil için path sayfasına mı geçilmeli?
  • Dönüşüm / save yığını state ve coordinate sayfalarında mı?

Sıradaki: koordinat sistemi

Stil ve dikdörtgen komutları netleştikten sonra eksen, ölçek ve dönüşüm için Koordinat sistemi sayfasına geçebilirsiniz. Önceki adım: Canvas oluşturma.