Hand Drawn Circle Simulation in HTML 5 Canvas

Hand Drawn Circle Simulation in HTML 5 Canvas

The following code creates a circle in HTML 5 Canvas using jQuery:
http://jsfiddle.net/LKRWq/
Code:
//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");
DrawCircle(75, 75, 20);
//draw a circle
function DrawCircle(x, y, radius)
{
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, true);
ctx.fillStyle = 'transparent';
ctx.lineWidth = 2;
ctx.strokeStyle = '#003300';
ctx.stroke();
ctx.closePath();
ctx.fill();
}
I am trying to simulate any of the following types of circles:

I have researched and found this
http://29a.ch/2010/2/10/hand-drawn-lines-algorithm-javascript-canvas-html5
but was unable to apply it.
I would like for the circle to be drawn rather than just appear.
Is there a better way to do this? I'm sensing there's going to be a lot of
math involved :)
P.S. I like the simplicity of PaperJs http://paperjs.org/ maybe this would
be the easiest approach using it's simplified paths?