Pola Papan Catur dalam Canvas

Untuk menampilkan pola papan catur, kita bisa menggunakan tag <canvas>. Method yang kita gunakan adalah rect().
<!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.