I would say that the solution would depends mainly on your use case and the performance you are aiming for.
The more simplistic approach I could think of is the following in pseudo code:
declare an array to hold the circles to draw on canvas
While the number of circle in the array is less than 20:
chose a random (x, y) coordinates where you will draw your next circle
for all circles in the array:
Check if the distance between its center and the center of the new circle is larger than the sum of their radius
if it is not the case:
move to the next loop
Add the new circle to the array. Since you arrive at this line, it means that you did not move to the next loop which means that the distance between the new circle and each of the other circles is larger than the sum of their radius which means that it is not overlapping either of them.