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
zumpoofAsked:
Who is Participating?
 
Tom BeckCommented:
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/
0
 
ambienceCommented:
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
0
 
zumpoofAuthor Commented:
Wow, thank you for putting the work into this, Tom. This is exactly what I was looking for.
0
 
Tom BeckCommented:
You're welcome. It was fun. Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.