canvas 画六边形边框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width='' height=''>测试</canvas>
    <script>
    var myCanvas = document.getElementById("myCanvas");
    var context = myCanvas.getContext("2d");

    function drawPath(x, y, n, r) {
        var i, ang;
        ang = Math.PI *  / n //旋转的角度
        context.save(); //保存状态
        context.fillStyle = 'rgba(0,0,0,0)'; //填充红色，半透明
        context.strokeStyle = 'hsl(120,50%,50%)'; //填充绿色
        context.lineWidth = ; //设置线宽
        context.translate(x, y); //原点移到x,y处，即要画的多边形中心
        context.moveTo(, -r); //据中心r距离处画点
        context.beginPath();
        for (i = ; i < n; i++) {
            context.rotate(ang) //旋转
            context.lineTo(, -r); //据中心r距离处连线
        }
        context.closePath();
        context.stroke();
        context.fill();
        context.restore(); //返回原始状态
    }
    drawPath(, , , ) //在100,100处画一个半径为40的五边形
    drawPath(, , , ) //在200,100处画一个半径为40的三角形
    drawPath(, , , ) //在300,100处画一个半径为40的六边形
    drawPath(, , , ) //在100,200处画一个半径为40的十五边形
    drawPath(, , , ) //在100,200处画一个半径为40的四边形
    </script>
</body>

</html>