Clash Royale CLAN TAG

chessboard canvas , loop and get some checkers as a circles in JS canvas

I am struggling how to create multiple checkers on the checkerboard
I have this JS code so far:

<script>
$(document).ready(function() {
var gColor = "black";
var c = $("#myCanvas")[0];
var ctx = c.getContext("2d");

ctx.lineWidth = 2;
ctx.strokeStyle = "black"; //set the color, gradient, or pattern for stroke

drawBoard();
$("#color").click(function () {
gColor = $("#color").val();
if (gColor > "")
drawBoard();
});

function drawBoard() {
var x, y, step = 60, step2 = 120;
ctx.rect(0,0,480,480);
ctx.stroke();
ctx.save();

for (var k=0; k<2; k++) {
step2 -= step;
ctx.translate(0, step*k);
console.log("translate:("+0+","+step*k+")");
for (var y=0; y<4; y++) {
for (var i=0; i<4; i++) {
x = i * 2 * step + step2;
ctx.fillStyle = gColor;
ctx.fillRect(x,y*step*2,step,step);
console.log("fillRect: "+x+","+y*step*2+","+step+","+step+","+gColor);
}
}
}
ctx.restore();
}

var c = $("#myCanvas")[0];
var ctx = c.getContext("2d");

var rad = 90;
for (var i=0; i<1; i++) {
switch (i) {
case 0: ctx.fillStyle = "red";
break;
}
ctx.beginPath();

// Draw circle (x, y, radius, starting angle, ending angle in radian)
ctx.arc(30, 30, 30, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();

}

});

</script>


I have this output :

But need something like this:

I understand that I need to do some sort of looping, but because I am just learning canvas I don't know where to start. Any help or advice appreciated

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.