Html5 canvas, как нарисовать объект похожий на шахматную доску?

Question

[sergey19940808]

Нужно нарисовать такую необычную доску

function init() {

    let canvas = document.querySelector(".canvas");
    canvas.width = 760;
    canvas.height = 690;

    let ctx = canvas.getContext("2d");
    ctx.fillStyle = 'grey'; // меняем цвет клеток
    ctx.fillRect(0, 0, 760, 690);
    for (i=0; i<8; i+=2) {
        for (j = 0; j < 8; j += 2) {
            ctx.clearRect(0 + i * 32, 0 + j * 32, 32, 32);
            ctx.clearRect(0 + (i + 1) * 32, 0 + (j + 1) * 32, 32, 32);
        }
    }

}

init();

Но пока получается заполнение всего холста

Answer 1

[Farwisdomer]

разбейте квадрат на 2, большой 8x8 и маленький 4x4. 8x8 уже сделали, теперь поменяйте цвет на белый в квардате 4x4.

Answer 2

[eRKa]

Внутри второго фора не стирай квадрат, а заливай нужным цветом. Перед тем как залить, делай проверку индексов, если они в запретном диапазоне, то заливай цветом общего фона.