We help IT Professionals succeed at work.

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
Comment
Watch Question

A mix of alpha-blending, masking, gradients could possibly make it work. I can only point you to some useful links.

http://blogs.adobe.com/webplatform/2014/02/24/using-blend-modes-in-html-canvas/
http://kaioa.com/node/104
Top Expert 2015
Commented:
Looks like circles with varying stroke thicknesses layered on top of each other.

Here's a jsFiddle that simulates the effect from that perspective;

http://jsfiddle.net/tommyBoy/hy9p8faw/1/

Author

Commented:
Wow, thank you for putting the work into this, Tom. This is exactly what I was looking for.
Top Expert 2015

Commented:
You're welcome. It was fun. Thanks for the points.