Untuk menampilkan pola papan catur, kita bisa menggunakan tag <canvas>. Method yang kita gunakan adalah rect().
Dari contoh di atas, kita bisa melihat bahwa dengan perulangan, percabangan dan rect, kita bisa menampilkan pola papan catur pada canvas. Warnanya bisa kita ganti dengan mengganti nilai dari fillStyle.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas width="640" Height="640" id="kanvas" style="background-color:white;border:1px black solid">
Canvas tidak dapat ditampilkan
</canvas>
<script>
var kanvas, x, y, ct;
var jpetak=8;
kanvas=document.getElementById("kanvas");
ct=kanvas.getContext("2d");
ct.fillStyle="black";
ct.beginPath();
for(y=0;y<jpetak;y++){
for(x=0;x<jpetak;x++){
if((x+y)%2==0)ct.rect(x*80, y*80, 80, 80);
}
}
ct.fill();
</script>
</body>
</html>
Dari contoh di atas, kita bisa melihat bahwa dengan perulangan, percabangan dan rect, kita bisa menampilkan pola papan catur pada canvas. Warnanya bisa kita ganti dengan mengganti nilai dari fillStyle.