html:
<canvas width="500" height="500" id='can'></canvas>
js:
var can=document.getElementById('can');
ctx = can.getContext('2d');
ctx.beginPath();
ctx.arc(250,250,250,0,2*Math.PI,true);
ctx.stroke();
ctx.beginPath();
ctx.arc(312,136,100,0,2*Math.PI,true);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(217, 100);
ctx.quadraticCurveTo(120, 80, 20, 150);
ctx.stroke();
ctx.moveTo(213, 165);
ctx.quadraticCurveTo(72, 262, 50, 398);
ctx.stroke();
ctx.moveTo(277, 232);
ctx.quadraticCurveTo(244, 425, 209, 500);
ctx.stroke();
ctx.moveTo(362, 225);
ctx.quadraticCurveTo(399, 375, 382, 467);
ctx.stroke();
ctx.moveTo(407, 175);
ctx.quadraticCurveTo(464, 204, 500, 273);
ctx.stroke();
ctx.moveTo(407, 104);
ctx.quadraticCurveTo(423, 88, 452, 99);
ctx.stroke();
ctx.moveTo(333, 40);
ctx.quadraticCurveTo(331, 27, 352, 24);
ctx.stroke();
ctx.moveTo(261, 51);
ctx.quadraticCurveTo(244, 23, 196, 9);
ctx.stroke();