让烟花在四个不同的方向看圈子

Question

我想让圆圈产生四个不同的方向，到目前为止我得到了这个：

但我希望它进入四个方向并且形状有点薄，就像我用红线画出她一样：

我的代码看起来像这样

        var points = [];
    
    function tegnSirkler(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext("2d");
        context.fillStyle = "black";
        context.fillRect(0, 0, canvas.width, canvas.height);
    
        for (var i = 0; i < 100; i++){
            
            var farge = "#" + Math.random().toString(16).substr(-6);
            var x = Math.floor(Math.random() * 300 / 2.1);
            var y = Math.floor(Math.random() * 300 / 2.1);
            var radius = 2;
            
            points.push(x);
            points.push(y);
            
            console.log("Flyttet et punkt i plass" + x + "," + y + ",");
            console.log("Lagt til et punkt i plass" + x + "," + y + ",");
            console.log("Tegnet et punkt i plass" + x + "," + y + ",");
        
            context.fillStyle = farge;
            context.fill();
            context.beginPath();
            context.arc(x, y, radius, 0, Math.PI * 2);
            context.stroke();
        }   
    }
    
    function init(){
        setInterval(tegnSirkler, 100);
    }
    
    window.onload = init;

            <canvas id="myCanvas" width="300" height="300"></canvas>