Canvas çizimlerinde piksel piksel resimler oluşturabilir ve düzenleyebiliriz. Kendi piksellerden oluşan çizimimizi oluşturabilir, oluşturduğumuz çizimleri tuvale ekleyebilir, tuvalin çizimlerini piksel bilgisi olarak elde edebilir veya piksel bilgilerini bir resim üzerinde görüntüleyebiliriz. Hatta çizimi sunucuya da gönderebiliriz. Kullanılan yöntemler şunlardır: createImageData getImageData putImageData toDataURL Canvas çizimlerinde çizimleri piksel piksel işlemek için ImageData (Resim verisi) sınıfı kullanılır. Bir ImageData nesnesi elde etmek için çizim kapsamının (context) createImageData ve getImageData yöntemleri kullanılır. Kulanımları şöyledir. createImageData kullanımı: createImageData(resim verisinin yüksekliği,
resim verisinin genişliği);
getImageData kullanımı: getImageData(başlangıç yatay / x konumu,
başlangıç dikey / y konumu,
genişlik,
yükseklik);
Bu yöntemlerin ikisi de bir ImageData nesnesi döndürür. Dönen değeri bir değişkene atar ve kullanırız. Eğer boş bir ImageData oluşturmak istiyorsanız createImageData yöntemini kullanın. Bu durumda tüm pikseller %100 saydam olan siyah renkle (beyaz göreceğiz) doldurulacaktır. Tuvaldeki çizimin bir bölümünü veya tamamını içeren bir ImageData nesnesine ihtiyacınız varsa getImageData yöntemini kullanın. createImageData için örnek: // 100 piksel genişliğinde ve 100 piksel yüksekliğinde boş bir imageData nesnesi oluştur.
var imageData = ctx.createImageData(100, 100);
getImageData için örnek: // Tuvaldeki çizimin x=0, y=0 konumundan başlayarak 100 piksel genişliğinde ve
// 100 piksel yüksekliğindeki parçasından bir imageData nesnesi oluştur.
var imageData = ctx.getImageData(0, 0, 100, 100);
ImageData nesnesinin 3 tane özelliği vardır. Bunlar: width - Resim verisinin tuttuğu resmin genişliği height - Resim verisinin tuttuğu resmin yüksekliği data - Piksel bilgilerini içeren bayt dizisi ImageData nesnesinin data özelliği, piksellerin RGBA (Kırmızı, yeşil, mavi ve alpha) değerlerini tutan bir bayt (0 ile 255 arası değerler içeren) dizisidir. Bir pikselin bilgileri dizinin arka arkaya gelen 4 elamanında tutulmaktadır. Bunu şöyle gösterebiliriz: 0. Piksel 1. Piksel 2. Piksel R G B A R G B A R G B A 3x3 bir ImageData verisi koordinatlarla birlikte şöyle gösterilebilir. 0. piksel 1. piksel 2. piksel 3. piksel 4. piksel 5. piksel 6. piksel 7. piksel 8. piksel x=0, y=0 x=1, y=0 x=2, y=0 x=0, y=1 x=1, y=1 x=2, y=1 x=0, y=2 x=1, y=2 x=2, y=2 R G B A R G B A R G B A R G B A R G B A R G B A R G B A R G B A R G B A Her bir piksel bilgileri 4'er baytlık bilgiler olduğundan, resmi piksel piksel okumak veya değiştirmek için genellikle data dizisinin uzunluğunda ve artış sayısı 4 olan döngüler ( for veya while ) kullanırız. Örnek: // Alttakinin döndürdüğü ImageData nesnesinin data dizisinin uzunluğu
// 5 x 5 x 4 = 100 bayt olacaktır (Genişlik x Yükseklik x 4 bayt).
var imageData = ctx.createImageData(5, 5);
for (var i = 0; i < imageData.data.length;
i += 4) {
console.log(imageData.data[
i]); // Kırmızı değeri
console.log(imageData.data[
i + 1]); // Yeşil değeri
console.log(imageData.data[
i + 2]); // Mavi değeri
console.log(imageData.data[
i + 3]); // Alpha değeri
}
console.log, çıktıyı konsola yazar. Konsolu görmek için tarayıcınızda F12 tuşuna basın. Altta, sağda veya ayrıca açılan pencerede Konsol (Console) sekmesini tıklayın. Üstteki örnek konsola 100 tane 0 yazacaktır. Dizinin bütün elemanları 0'dır. Varsayılan piksel değerleri yukarıda da belirtildiği gibi tam saydam bir siyahtır ( rgba(0, 0, 0, 0) ). Bu şekilde gezmeniz gerekmiyor ve konumu bilinen (x ve y) belirli bir pikselin başlangıç konumunu elde etmek istiyorsanız şu hesabı kullanın: var pikselinDizidekiBaslangici = 4 * (x + y * imageData.width) Örneğin genişlik 20 piksel ise resim verisindeki x=10, y=10 konumundaki pirselin dizi içindeki başlangıç konumu 4*(10+10*20)=840 olacaktır. 840. eleman bu pikselin kırmızı, 841. eleman mavi, 842. eleman yeşil ve 843. eleman alfa değeridir. Peki konumun hangi pikselin verilerine denk geldiğini nasıl bulacağız? X değeri için: var x = Math.floor(konum / 5 * 4);
Y değeri için: var y = (konum - (4 * imageData.width * y)) / 4;
setImageData Yöntemi Bu yöntem bir ImageData verisini tuvale çizer. Kullanımı şöyledir: setImageData(ImageData nesnesi,
resmin çizileceği yatay konum,
resmin çizileceği dikey konum);
Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
var resim = new Image();
// Bu fonksiyon alttaki resim.src = "UrgupBalon.jpg" satırından sonra
// resim yüklendiğinde çalışır.
resim.onload = function () {
// Resmi en başa çiz.
ctx.drawImage(resim, 0, 0);
// Resmin x=20, y=20 koordinatından başlayarak 50 piksel genişlikte ve
// 50 piksel yükseklikteki kısmının piksel RGBA değerlerini al.
var imageData = ctx.getImageData(20, 20, 50, 50);
// ImageData nesnemizi (imageData) tuvalin x=100, y=100 konumundan
// itabaren çiz.
ctx.putImageData(imageData, 100, 100);
};
resim.src = "UrgupBalon.jpg";
}
</script> Çıktısı şöyledir: Örnekte görüldüğü gibi resmin küçük bir parçası ImageData nesnesi olarak alınmış ve daha sonra bu parçayı içeren ImageData verisi başka bir koordinata çizilerek kopyalama yapılmıştır. Renk Seçici Örneği Bu örnek, tuvalin üzerinde fare gezdirildiğinde, farenin üzerinde bulunduğu pikselin renk değerini görüntüler. <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red" onmousemove="renkDegeriniGoster(event)">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
Fareyi resim üzerinde gezdirin.
<script>
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
function resmiYukle() {
var resim = new Image();
resim.onload = function () {
ctx.drawImage(resim, 0, 0);
};
resim.src = "UrgupBalon.jpg";
}
function renkDegeriniGoster(event) {
// Tıklanan etiketin konumunu ve diğer boyut değerlerini ver.
var bcr = event.target.getBoundingClientRect();
// Olayın gerçekleştiği, sayfaya göre farenin x değerinden
// etiketin yatay konumunu çıkarıp farenin etikete göre konumunu
// (etiketin neresinde olduğunu) bul.
var x = event.clientX - bcr.left;
// Aynı işlemi y değerini belirlemek için yap.
var y = event.clientY - bcr.top;
// Sadece 1 pikselin renk değerlerini yükle.
var imageData = ctx.getImageData(x, y, 1, 1);
// Renk değerlerini onaltılı renk değerine dönüştür ve
// dvRenkDegeri isimli divin içinde görüntüle.
document.getElementById("dvRenkDegeri").innerHTML = rgbToHex(imageData.data[0], imageData.data[1], imageData.data[2]);
}
function rgbToHex(r,g,b) {
return "#" + parseInt(r).toString(16) + parseInt(g).toString(16) + parseInt(b).toString(16);
}
resmiYukle();
</script>
Örneğin çalışan hali şöyle: toDataURL Yöntemi toDataURL yöntemi, tuvaldeki görüntünün ikili halini (resmi oluşturan komple bayt verisini) Base64 ile kodlanmış şekilde bir string olarak döndürür. Base64 kodlama ile ilgili bilgi almak veya kodlama işlemleri için buradan yarararlanabilirsiniz. Dönen verinin başında data:image/png;base64, şeklinde bir bölüm olacaktır. Bu bölümdeki image/png , resmin formatını belirtir. Bu ifadelere MIME tipi denir. Bunlar dosyaların türlerini belirtmek için kullanılırlar. Örneğin metin dosyaları için text/plain , bir PDF belgesi için application/pdf gibi. Bu kısımdan sonra Base64 ile kodlanmış bayt değerleri vardır. toDataURL yöntemi ile elde edilmiş örnek resim verisi: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAzUlEQVR4nO3WI Q4AIAwEwXsyT+DnxWCpBMRMcr5mkybJCHBUEQkc1d58fAd8SSDQ8GJBQxwAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAVywf8wi7pofaEAAAAABJRU5ErkJggg== toDataURL verisi sunucuya gönderilebilir, JavaScript uygulamamız ya da HTML içinde kullanılabilir. Hatta Base64 kodlanmış bu verinin kodunu çözerek (Base64Encode) elde edeceğimiz ikili değeri başka programlarda da kullanabiliriz. Örneğin bu veri bir IMG etiketinin src özelliğine atanarak resim görüntülenebilir. Üstteki örnek resim verisini deneyebilirsiniz. Örnek: <canvas id="cnTuval" width="170" height="94" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
Alttaki bir IMG etiketidir.<br />
<img id="imgResim" />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
// Bir resim nesnesi oluştur.
var resim = new Image();
// Resim yüklendiğinde (şimdi değil) tanımlanarak
// onload olayına atanan fonksiyonu çalıştır.
resim.onload = function () {
// Resim yüklenmiştir. Tuvale çiz.
ctx.drawImage(resim, 0, 0);
// dataURL metnini ver.
var dataURL = tuval.toDataURL();
// dataURL metnini img etiketinin src özelliğine ata.
document.getElementById("imgResim").src = dataURL;
};
// (Bu satır üstteki fonksiyondan önce çalışır.)
resim.src = "UrgupBalon.jpg";
}
ciz();
</script>
Çıktısı şöyle olacaktır: ImageData ile Filtreler Uygulama ImageData nesnesi, pikselleri değiştirmemize imkan verdiğinden, tuvaldeki görüntüyü getImageData ile alıp, piksel bilgilerini değiştirip tuvale geri yazarak filtreler oluşturabiliriz. Burada bir kaç tane temel filtreleme işlemini yapalım. Gri Tonlama Filtresi Siyah ve beyaz arasındaki tüm renklerde (griler) kırmızı, yeşil ve mavi değerleri eşittir. Örneğin #cccccc (veya rgb(204, 204, 205) veya rgba(204, 204, 204, 1) ). Gri tonlama filtresinde piksellerin kırmızı, yeşil ve mavi değerlerinin ortalaması alınır ve renk değerlerinin hepsi bu ortalama değer ile değiştirilir. <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
var resim = new Image();
// Bu fonksiyon alttaki resim.src = "UrgupBalon.jpg" satırından sonra
// resim yüklendiğinde çalışır.
resim.onload = function () {
// Resmi en başa çiz.
ctx.drawImage(resim, 0, 0);
// Resim yüklendiğine göre filtreyi uygulayabilirsin.
filtreUygula(ctx);
};
resim.src = "UrgupBalon.jpg";
}
function filtreUygula(ctx) {
// Tüm çizimi ImageData olarak al.
var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var r, g, b, ortalama;
// Pikselleri tek tek gez...
for (var i = 0; i < imageData.data.length; i += 4) {
r = imageData.data[i]; // Kırmızı değerini al
g = imageData.data[i + 1]; // Yeşil değerini al
b = imageData.data[i + 2]; // Mavi değerini al
// Renk değerlerinin ortalamasını hesapla.
ortalama = parseInt((r + g + b) / 3);
imageData.data[i] = ortalama; // Kırmızı değerini ortalama değerle değiştir.
imageData.data[i + 1] = ortalama; // Yeşil değerini ortalama değerle değiştir.
imageData.data[i + 2] = ortalama; // Mavi değerini ortalama değerle değiştir.
}
// ImageData nesnesinin yeni halini tuvale çiz.
// Burada biraz aşağı çiziliyor. Dolayısıyla resmin her iki hali de
// görülecek. Eğer resmi tamamen değiştirmek isterseniz üzerine (0,0 noktasına)
// çizin.
ctx.putImageData(imageData, 0, 100);
}
</script>
Örneğin çıktısı şöyledir: Örnekte resmin filtrelenmiş hali altına çizilmiştir. Eğer sadece filtrelenmiş halini göstermek isterseniz asıl resmin üzerine çizin. Mor Tonlama Filtresi Bu filtrede sadece mavi ve yeşil değerleri birbiriyle değiştirilir. <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
var resim = new Image();
// Bu fonksiyon alttaki resim.src = "UrgupBalon.jpg" satırından sonra
// resim yüklendiğinde çalışır.
resim.onload = function () {
// Resmi en başa çiz.
ctx.drawImage(resim, 0, 0);
// Resim yüklendiğine göre filtreyi uygulayabilirsin.
filtreUygula(ctx);
};
resim.src = "UrgupBalon.jpg";
}
function filtreUygula(ctx) {
// Tüm çizimi ImageData olarak al.
var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var g, b;
// Pikselleri tek tek gez...
for (var i = 0; i < imageData.data.length; i += 4) {
g = imageData.data[i + 1]; // Yeşil değerini al
b = imageData.data[i + 2]; // Mavi değerini al
imageData.data[i + 1] = b; // Yeşil değerini mavi değeri ile değiştir.
imageData.data[i + 2] = g; // Mavi değerini yeşil değeri ile değiştir.
}
// ImageData nesnesinin yeni halini tuvale biraz aşağı çiz.
// (Resmi tamamen değiştirmek için üstüne (x=0, y=0 noktasına) çizin.)
ctx.putImageData(imageData, 0, 100);
}
</script>
Çıktısı: Saydamlık Efekti Bu efektde piksellerin alfa değerleri değiştirilir. Piksellerin alfa değerleri 0 ile 255 arasında bir değerdir. 255 sayısını bir oran ile (0 ile 1 arası bir sayı) çarparsak, o oranda saydamlık vermiş oluruz. <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
var resim = new Image();
// Bu fonksiyon alttaki resim.src = "UrgupBalon.jpg" satırından sonra
// resim yüklendiğinde çalışır.
resim.onload = function () {
// Resmi en başa çiz.
ctx.drawImage(resim, 0, 0);
// Resim yüklendiğine göre filtreyi uygulayabilirsin.
filtreUygula(ctx);
};
resim.src = "UrgupBalon.jpg";
}
function filtreUygula(ctx) {
// Bir saydamlık oranı belirle.
var saydamlikOrani = 0.25;
// Tüm çizimi ImageData olarak al.
var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var g, b;
// Pikselleri tek tek gez...
for (var i = 0; i < imageData.data.length; i += 4) {
// Alfa değerini oranla çarp.
imageData.data[i + 3] = saydamlikOrani * 255;
}
// ImageData nesnesinin yeni halini tuvale biraz aşağı çiz.
// (Resmi tamamen değiştirmek için üstüne (x=0, y=0 noktasına) çizin.)
ctx.putImageData(imageData, 0, 100);
}
</script>
Çıktısı: Mürekkep Efekti Gri tonlamanın bir çeşidi olan bu efektde kırmızı, yeşil ve mavi değerleri toplamı 1 olan 3 farklı oranla çarpılır. Toplamı 1 olmak şartılyla bu oranları değiştirerek farklı görüntüler elde edebilirsiniz. <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
var resim = new Image();
// Bu fonksiyon alttaki resim.src = "UrgupBalon.jpg" satırından sonra
// resim yüklendiğinde çalışır.
resim.onload = function () {
// Resmi en başa çiz.
ctx.drawImage(resim, 0, 0);
// Resim yüklendiğine göre filtreyi uygulayabilirsin.
filtreUygula(ctx);
};
resim.src = "UrgupBalon.jpg";
}
function filtreUygula(ctx) {
// Bir saydamlık oranı belirle.
var saydamlikOrani = 0.25;
// Tüm çizimi ImageData olarak al.
var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var r, g, b, ortalama;
// Pikselleri tek tek gez...
for (var i = 0; i < imageData.data.length; i += 4) {
r = imageData.data[i]; // Kırmızı değerini al.
g = imageData.data[i + 1]; // Yeşil değerini al.
b = imageData.data[i + 2]; // Mavi değerini al.
// Değerleri toplamı 1 olan farklı oranlarla çarp ve bir ortalama hesapla.
ortalama = r * 0.3 + g * 0.59 + b * 0.11;
// Renk değerlerini hesaplanan ortalama ile değiştir.
imageData.data[i] = ortalama + 100; // Kırmızı değerini değiştir.
imageData.data[i + 1] = ortalama + 50; // Yeşil değerini değiştir.
imageData.data[i + 2] = ortalama; // Mavi değerini değiştir.
}
// ImageData nesnesinin yeni halini tuvale biraz aşağı çiz.
// (Resmi tamamen değiştirmek için üstüne (x=0, y=0 noktasına) çizin.)
ctx.putImageData(imageData, 0, 100);
}
</script>
Çıktısı: Negatif Resim (Tersini Alma / Çevirme) Efekti Bu efektte tüm renk değerleri 255'den farkları ile değiştirilir. Örneğin kırmızı değeri 100 ise bu değeri 255-100=155 ile değiştiririz. <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
var resim = new Image();
// Bu fonksiyon alttaki resim.src = "UrgupBalon.jpg" satırından sonra
// resim yüklendiğinde çalışır.
resim.onload = function () {
// Resmi en başa çiz.
ctx.drawImage(resim, 0, 0);
// Resim yüklendiğine göre filtreyi uygulayabilirsin.
filtreUygula(ctx);
};
resim.src = "UrgupBalon.jpg";
}
function filtreUygula(ctx) {
// Bir saydamlık oranı belirle.
var saydamlikOrani = 0.25;
// Tüm çizimi ImageData olarak al.
var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var r, g, b, ortalama;
// Pikselleri tek tek gez...
for (var i = 0; i < imageData.data.length; i += 4) {
r = imageData.data[i]; // Kırmızı değerini al.
g = imageData.data[i + 1]; // Yeşil değerini al.
b = imageData.data[i + 2]; // Mavi değerini al.
// Renk değerlerini 255'den farkları ile değiştir.
imageData.data[i] = 255 - r; // Kırmızı değerini değiştir.
imageData.data[i + 1] = 255 - g; // Yeşil değerini değiştir.
imageData.data[i + 2] = 255 - b; // Mavi değerini değiştir.
}
// ImageData nesnesinin yeni halini tuvale biraz aşağı çiz.
// (Resmi tamamen değiştirmek için üstüne (x=0, y=0 noktasına) çizin.)
ctx.putImageData(imageData, 0, 100);
}
</script>
Çıktısı: Gürültü (Noise) Efekti Bu efektte, gürültü seviyesi diyebileceğimiz bir değer -0.5 ile 0.5 arasındaki rasgele bir bir değerle çarpılarak bir sayı üretilir ve bu sayı renk değerlerine eklenir. <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
var resim = new Image();
// Bu fonksiyon alttaki resim.src = "UrgupBalon.jpg" satırından sonra
// resim yüklendiğinde çalışır.
resim.onload = function () {
// Resmi en başa çiz.
ctx.drawImage(resim, 0, 0);
// Resim yüklendiğine göre filtreyi uygulayabilirsin.
filtreUygula(ctx);
};
resim.src = "UrgupBalon.jpg";
}
function filtreUygula(ctx) {
var gurultuSeviyesi = 55;
// Tüm çizimi ImageData olarak al.
var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var r, g, b, ortalama;
// Pikselleri tek tek gez...
for (var i = 0; i < imageData.data.length; i += 4) {
r = imageData.data[i]; // Kırmızı değerini al.
g = imageData.data[i + 1]; // Yeşil değerini al.
b = imageData.data[i + 2]; // Mavi değerini al.
// -0.5 ile +0.5 arası oluşturduğun rastgele sayıyı gürültü seviyesi ile çarp.
// (0.5 * Math.random() ifadesi -0.5 ile +0.5 arası bir değer üretir.)
var rand = (0.5 - Math.random()) * gurultuSeviyesi;
// Hesapladığın rastgele değeri renk bilgilerine ekle.
imageData.data[i] = r + rand; // Kırmızı değerini değiştir.
imageData.data[i + 1] = g + rand; // Yeşil değerini değiştir.
imageData.data[i + 2] = b + rand; // Mavi değerini değiştir.
}
// ImageData nesnesinin yeni halini tuvale biraz aşağı çiz.
// (Resmi tamamen değiştirmek için üstüne (x=0, y=0 noktasına) çizin.)
ctx.putImageData(imageData, 0, 100);
}
</script>
Çıktısı: Bu kadar. Lütfen eksik veya hata görürseniz bildirin. İlgili Makaleler HTML5 ve Flash üzerine HTML5 Canvas etiketi ile çizim Canvas etiketine düz çizgilerle çizim yapmak Canvas ile dörtgenler çizmek Canvas ile daire, çember, yay ve dilimler çizmek Canvas ile eğriler çizmek Canvas ile metin görüntüleme Canvas çizgi uçları ve çizgi birleşimleri Canvas çizimlerinde tuval durumunu saklama ve geri yükleme Canvas ile gölge efekti oluşturma Canvas ile tuval üzerine resim çizmek Canvas ile degrade / gradient (geçişli renk) dokuları oluşturma Canvas ile dönüşüm işlemleri 1: Tuvali kaydırma ve döndürme Canvas ile dönüşüm işlemleri 2: Ölçekleme Canvas ile dönüşüm işlemleri 3: Transform ile Dönüşüm Canvas ile resim dokusu oluşturma Canvas Clip Yöntemiyle Maskeleme Canvas globalAlpha Özelliği Canvas globalCompositeOperation Özelliği Canvas İle Piksel İşlemleri (Bu makale)
