JavaScript'te Canvas ile Çalışmaya Başlama

Canvas, tarayıcıda JavaScript ile çizim yapmak için özel bir alandır. Bu alan, genişlik ve yüksekliğin belirtilmesi gereken <canvas> etiketi kullanılarak oluşturulur:

html<canvas width="200" height="200"></canvas>

JavaScript ile bu alanla çalışmak için öncelikle bu etikete bir değişkende referans alalım:

javascriptlet canvas = document.querySelector('canvas');

Ardından, bu değişkene getContext metodunu uygulamak gerekir:

javascriptlet canvas = document.querySelector('canvas');
let ctx    = canvas.getContext('2d');

Şu şekilde basitleştirilebilir:

javascriptlet ctx = document.querySelector('canvas').getContext('2d');

Sonuç olarak, ctx değişkenine, içinde sözde yürütme bağlamı bulunan bir nesne yazılacaktır. Tüm çizim işlemleri bu nesnenin metotları kullanılarak gerçekleşecektir. Bunların incelenmesiyle sonraki derslerde ilgileneceğiz.