Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function(){
            let canvas = document.getElementById('canvasId')
            let context = canvas.getContext("2d")
            // за да опишем една окръжност с 10 фигури е необходимо да въртим 36 градуса спрямо всяка точка
            context.fillStyle = "firebrick";
            context.translate(canvas.width / 2, canvas.height / 2); // преместваме горния ляв ъгъл, който е начало на канвас да бъде в центъра, т.е. старите координати 400, 400 (при width = 800, height = 800) вече ще са 0,0
            context.rotate(18 * Math.PI / 180); // предварително завъртаме на 18 градуса цялото платно за да получим позицията на първия кръг (може да се пропусне като стъпка)

            context.strokeStyle = 'red';
            context.moveTo(0, 0);
            context.lineTo(0, 200); // в зависимост колко отстояние между отделните окръжности е необходимо (в случая 4 пъти радиуса)
            context.stroke();

            for (let i = 0; i < 10; i++) {
                context.rotate(36 * Math.PI / 180); // спрямо новия център въртим целия канвас и рисуваме окръжности на всяка стъпка в една и съща точка 0, 200 но след завъртане тя е на друга позиция в страницата
                context.beginPath();
                context.arc(0, 200, 50, 0, 2 * Math.PI);
                context.fill();
            }


        });
    </script>
    <style type="text/css">
        #canvasId{
            background: gold;
        }
    </style>
</head>
<body>
    <canvas width="800" height="800" id="canvasId"></canvas>
</body>
</html>