title: Canvas clip image with two quadraticCurves
body: <p>I just wanted to clip image in a curve .. but not happening this..
  Only image is showing and but not with clip.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var canvas = document.getElementById('leaf');
  var context = canvas.getContext('2d');
  
  /*
   * save() allows us to save the canvas context before
   * defining the clipping region so that we can return
   * to the default state later on
   */
  
  context.save();
  context.beginPath();
  context.moveTo(188, 150);
  context.quadraticCurveTo(288, 0, 388, 150);
  context.lineWidth = 10;
  context.quadraticCurveTo(288, 288, 188, 150);
  context.lineWidth = 10;
  
  context.clip();
  
  context.beginPath();
  var imageObj = new Image();
  imageObj.onload = function() {
    context.drawImage(imageObj, 10, 50);
  };
  
  imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
  
  /* context.beginPath();
  context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'yello';
  context.fill();
  */
  
  /*
   * restore() restores the canvas context to its original state
   * before we defined the clipping region
   */
  
  context.restore();
  context.beginPath();
  context.moveTo(188, 150);
  context.quadraticCurveTo(288, 0, 388, 150);
  context.lineWidth = 10;
  context.quadraticCurveTo(288, 288, 188, 150);
  context.lineWidth = 10;
  
  context.strokeStyle = 'blue';
  context.stroke();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="leaf" width="500" height="500" style='left: 0; 
      position: absolute; top: 0;'&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>