title: Fill a path with image and stretch image in Canvas HTML5
body: <p>I wanna to fill a path like a circle or a custom path with an image but wanna the image to stretch, so that the pixels of the image don't reside outside the closed path.
  Is this possible to achieve in HTML5 using the Canvas object ?</p>
  
  <p>Here is my custom path:</p>
  
  <pre><code>ctx.beginPath();
      ctx.moveTo(170, 80);
      ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
      ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
      ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
      ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
      ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
      ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);
  
      // complete custom shape
      ctx.closePath();
      ctx.lineWidth = 5;
  
      ctx.fillStyle = '#8ED6FF';
      ctx.fill();
  
      ctx.strokeStyle = 'blue';
      ctx.stroke();
  </code></pre>
  
  <p>What I wanna to achieve is to fill the cloud with an image but stretch it. Doesn't matter if it look ugly.</p>