How to generate circles distributed randomly without overlap?

I need to generate a graph that a number of points with different radius are randomly located in the canvas without overlapping.

For example, Inputs are canvas size {w:1000, h:1000} and

{

{num:40, radius:30}, // 40 points with radius=30

{num:100, radius:2}, // 100 points with radius=12

.....

}

And output is that these points random positioned in the canvas but there is no overlap.

I want to be able to visualize the graph, so I used jquery to write the code, but didn't work out.

Any algorithm or tools you can recommend? Thanks guys!