canvas绘制正六边形且每个边再绘制正六边形

1、问题描述：

希望实现六边形的布局，如图

2、代码

<canvas id="test">
</canvas>

<script>
    // 获取canvas元素
    const canvas = document.getElementById("test");
    const ctx = canvas.getContext("2d");

    // 设置canvas的宽度和高度
    canvas.width = 600;
    canvas.height = 600;

    // 计算六边形的参数
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const sideLength = 100;

    // 绘制六边形
    function drawHexagon(x, y) {
        ctx.beginPath();
        for (let i = 0; i < 6; i++) {
            const angle = 2 * Math.PI / 6 * i;
            const posX = x + sideLength * Math.cos(angle);
            const posY = y + sideLength * Math.sin(angle);
            ctx.lineTo(posX, posY);
        }
        ctx.closePath();
        ctx.fillStyle = "#ffffff";
        ctx.fill();
        ctx.strokeStyle = "#000000";
        ctx.stroke();
    }

    // 绘制正六边形方块
    function drawHexagonGrid() {
        drawHexagon(centerX, centerY);

        // 计算周围六个方块的坐标
        const radius = sideLength * Math.sqrt(3);
        const xOffset = radius * Math.cos(Math.PI / 6);
        const yOffset = radius * Math.sin(Math.PI / 6);

        // 上方方块
        drawHexagon(centerX, centerY - 2 * yOffset);

        // 上右方方块
        drawHexagon(centerX + xOffset, centerY - yOffset);

        // 下右方方块
        drawHexagon(centerX + xOffset, centerY + yOffset);

        // 下方方块
        drawHexagon(centerX, centerY + 2 * yOffset);

        // 下左方方块
        drawHexagon(centerX - xOffset, centerY + yOffset);

        // 上左方方块
        drawHexagon(centerX - xOffset, centerY - yOffset);
    }

    // 调用函数进行绘制
    drawHexagonGrid();
</script>