Random dots inside a circle on a canvas

Question

I created a canvas and a circle on the canvas.

I'm trying to make random dots inside the circle by using the solution here but dots are being placed inside and outside the circle as well.

here's my code from the moment I create the circle:

 draw_circle(600, 600, 500);


            for (i = 0; i < 20; i++) {
                 radius = 500;
                 y = 0;
                 x = 0;
                y = -radius + Math.random() * (radius + radius + 1);

                // x must respect x² + y² < r²
                xMax = Math.pow(Math.pow(radius, 2) - Math.pow(y, 2), 0.5);
                x = Math.random() * 2 * xMax - xMax;

            draw_circle(x, y, 3);
            }

and this is my draw_circle function:

 function draw_circle(x, y, r) {

         ctx.beginPath();
         ctx.arc(x, y, r, 0, Math.PI * 2);
         ctx.stroke();
     }

Answer 1

The problem is that you are drawing your circle centred at (600,600), but you are drawing your dots centred at (0,0).

Try:

draw_circle(x+600, y+600, 3);