JSFiddle - React, Tailwind, and code Playground

by souravdikshit

HTML

<canvas id="myCanvas"></canvas>

JavaScript

var canvas, ctx;
        var circlePoints = [];
        function createCanvasPainting() {
            
            canvas = document.getElementById('myCanvas');
            if (!canvas || !canvas.getContext) {
                return false;
            }
            canvas.width = 600;
            canvas.height = 600;
            ctx = canvas.getContext('2d');           
            ctx.strokeStyle = '#B8D9FE';
            ctx.fillStyle = '#B8D9FE';
            ctx.translate(300, 250);
            ctx.arc(0, 0, 50, 0, Math.PI * 2); //center circle
            ctx.stroke();
            ctx.fill();
            var angleRotate = 0;
            for (var i=0; i<11; i++) {
                if (i > 0) {
                    angleRotate += 32.72;
                }
                lineToAngle(ctx, 0, 0, 200, angleRotate);
            }
        }

        function lineToAngle(ctx, x1, y1, length, angle) {

            angle *= Math.PI / 180;

            var x2 = x1 + length * Math.cos(angle),
            y2 = y1 + length * Math.sin(angle);
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.lineWidth = 1;
            ctx.arc(x2, y2, 40, 0, Math.PI * 2);
            ctx.fill();
            ctx.stroke();

            circlePoints.push({x: x2, y: y2});
            // console.log(circlePoints);
        }

        createCanvasPainting();