HTML canvas: how do I create these distorted circles?

I'd like to automatically generate the circles in the attached image, but I don't know if it's possible. Ideally, I'd select a few colors, and then I'd use canvas to create these stacked, semi-random, distorted circles. Could someone point me in the right direction? I've only used canvas to draw basic shapes, but haven't done layering or distortion...or masking.
circles.png