// draw grid of rounded rectangles
context.lineWidth = 2;
context.strokeStyle = "#bbb";
context.fillStyle = "#999";
for (var i = 0; i < 9; i++) {
for (var j = 0; j < 4; j++) {
roundedRect(30 + 60 * i, 40 + 60 * j, 50, 50, 26 - (i * 2));
if (i % 4== j) {
context.fill();
}
context.stroke();
}
}
function roundedRect(x, y, width, height, radius) {
context.beginPath();
context.moveTo(x + radius, y);
context.lineTo(x + width - radius, y);
context.quadraticCurveTo(x + width, y, x + width, y + radius);
context.lineTo(x + width, y + height - radius);
context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
context.lineTo(x + radius, y + height);
context.quadraticCurveTo(x, y + height, x, y + height - radius);
context.lineTo(x, y + radius);
context.quadraticCurveTo(x, y, x + radius, y);
context.closePath();
}