S
S
sergey199408082018-07-04 09:28:39
Canvas
sergey19940808, 2018-07-04 09:28:39

Html5 canvas, how to draw a chessboard-like object?

Need to draw such an unusual board
5b3c684d775b1919884125.png

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();

But while it turns out filling the entire canvas
5b3c68f641ef7632740186.png

Answer the question

In order to leave comments, you need to log in

2 answer(s)
F
Farwisdomer, 2018-07-04
@Farwisdomer

split the square into 2, big 8x8 and small 4x4. 8x8 already done, now change the color to white in the 4x4 square.

E
eRKa, 2018-07-04
@kttotto

Inside the second handicap, do not erase the square, but fill it with the desired color. Before uploading, check the indexes, if they are in the forbidden range, then fill with the general background color.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question