title: Jigsaw Puzzle pices using Bezier Curve
body: <p>I was trying to make some jigsaw pieces like this - </p>
  
  <p><img src="https://i.stack.imgur.com/GvroR.png" alt="enter image description here"> 
   <img src="https://i.stack.imgur.com/JAKMr.png" alt="enter image description here"></p>
  
  <p>What I have tried till now with lineTo - </p>
  
  <pre><code>outside: function (ctx, s, cx, cy) {
          ctx.lineTo(cx, cy)
          ctx.lineTo(cx+s*.3, cy)
          ctx.lineTo(cx+s*.5, cy+s*-.2)
          ctx.lineTo(cx+s*.7, cy)
          ctx.lineTo(cx+s, cy)
      },
      inside: function (ctx, s, cx, cy) {
          ctx.lineTo(cx, cy)
          ctx.lineTo(cx+s*.3, cy)
          ctx.lineTo(cx+s*.5, cy+s*+.2)
          ctx.lineTo(cx+s*.7, cy)
          ctx.lineTo(cx+s, cy)
      },
  </code></pre>
  
  <p><a href="https://jsfiddle.net/uccfb46z/4/" rel="nofollow noreferrer">Fiddle Link</a></p>