Canvas etiketi ile dörtgen çizmek için şu yöntemler kullanılır:
- rect
- strokeRect
- fillRect
- clearRect
Canvas rect yöntemi:
rect yöntemi bir dörtgen tanımlar. Daha sonra bu dörtgeni oluşturmak için fill veya stroke yöntemlerinin (istersek ikisini de) kullanmak gerekir.
Kullanımı:
rect(başlangıç yatay / x konumu,
başlangıç dikey / y konumu,
dörtgenin genişliği,
dörtgenin yüksekliği);
Örnek:
<canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
// Bir dörtgen tanımla.
ctx.rect(10, 10, 50, 50);
// Dolgu rengini belirle
ctx.fillStyle = "red";
// Dörtgeni dolgulu olarak çiz.
ctx.fill();
}
</script>
Çıktısı şöyle olacaktır:

Canvas strokeRect yöntemi:
strokeRect, belirtilen çizgi stili, rengi ve kalınlığı ile içi boş bir dörtgen çizmek için kullanılır.
Kullanımı şöyledir:
strokeRect(başlangıç yatay / x konumu,
başlangıç dikey / y konumu,
genişliği,
yüksekliği)
Örnek:
<canvas id="cnTuval" width="200" height="200" style="border:1px solid red">
Tarayıcınız HTML5 desteklemiyor
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
// Çizgiler düz mavi renk olsun
ctx.strokeStyle = "blue";
// Çizgi kalınlığı 3 piksel olsun
ctx.lineWidth = 3;
// x=20, y=30 konumundan başla ve 80 piksel genişliğinde
// 50 piksel yüksekliğinde bir boş dörtgen çiz
ctx.strokeRect(20, 30, 80, 50);
}
</script>
Çıktı şöyle olacaktır:

Canvas fillRect yöntemi:
fillRect yöntemi, belirtilen dolgu stilini kullanarak içi dolu bir dörtgen çizer.
Kullanımı şöyledir:
fillRect(başlangıç yatay / x konumu,
başlangıç dikey / y konumu,
genişliği,
yüksekliği)
Örnek:
<canvas id="cnTuval" width="200" height="200" style="border:1px solid red">
Tarayıcınız HTML5 desteklemiyor
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
// Dolgular için düz sarı renk kullanılsın
ctx.strokeStyle = "yellow";
// x=20, y=30 konumundan başla ve 80 piksel genişliğinde
// 50 piksel yüksekliğinde içi dolgulu bir dörtgen çiz.
ctx.fillRect(20, 30, 80, 50)
}
</script>
Çıktı şöyle olacaktır:

strokeRect ve fillRect yöntemlerinin birlikte kullanımı:
Eğer hem dolgulu, hem de kenarlığı olan bir dörtgen çizmek isterseniz.
fillRect ve
strokeRect yöntemlerini aynı parametrelerle arka arkaya çağırın.
Örnek:
<canvas id="cnTuval" width="200" height="200" style="border:1px solid red">
Tarayıcınız HTML5 desteklemiyor
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
// Dolgular için düz sarı renk kullanılsın
ctx.fillStyle = "yellow";
// Çizgiler için düz mavi renk kullanılsın
ctx.strokeStyle = "blue";
// Çizgi kalınlığı 3 piksel olsun.
ctx.lineWidth = 3;
// x=20, y=30 konumundan başla ve 80 piksel genişliğinde
// 50 piksel yüksekliğinde içi dolgulu bir dörtgen çiz.
ctx.fillRect(20, 30, 80, 50)
// Aynı konuma, aynı ölçülerle boş bir dörtgen çiz.
ctx.strokeRect(20, 30, 80, 50)
}
</script>
Çıktı şu şekilde olacaktır:

Canvas clearRect yöntemi:
clearRect yöntemi, belirtilen bir dörtgen alanı temizler. Kullanımı
fillRect ve
strokeRect ile aynıdır. Dörtgen alan içinde kalan çizimler silinir.
Örnek:
<canvas id="cnTuval" width="200" height="200" style="border:1px solid red">
Tarayıcınız HTML5 desteklemiyor
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {
var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");
ctx.fillStyle = "yellow";
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;
ctx.fillRect(20, 30, 80, 50)
ctx.strokeRect(20, 30, 80, 50)
// Bundan sonraki dolgularda kullanacağın renk kırmızı olsun
ctx.fillStyle = "red";
// İkinci bir dolgulu dörtgen çiz (kırmızı).
ctx.fillRect(70, 60, 90, 90);
// x=50, y=45 konumundan başlayarak 75 piksel
// genişliğinde ve 50 piksel yüksekliğindeki dörtgen alanı temizle
ctx.clearRect(50, 45, 75, 50);
}
</script>
Çıktı şöyle olacaktır:

İki dörtgen arasındaki beyaz boşluk
clearRect ile oluşturulmuştur.
clearRect, belirtilen bölgeyi renklerden temizler (Saydamlık değeri 0 olan, yani tam saydam siyah renkle doldurur. Saydamlık 0 olduğundan beyaz görürüz.).
clearRect çoğunlukla tuval üzerindeki tüm çizim yenileneceğinde çizim alanını temizlemek için kullanılır. Bunu yapmak için basitçe şunu kullanın:
ctx.fillRect(0, 0, tuval.width, tuval.height);
Tuval üzerinde negatif koordinatlı konumlarda da çizim olabilir. Böyle bir durum varsa,
fillRect yönteminin ilk iki parametresine negatif değerler verebilirsiniz.
Bu kadar. Gördüğünüz eksikleri lütfen bildirin.