Masking an image to the canvas

HTML

<canvas id="c" width="200" height="158"></canvas>

CSS

body {
    background: #CEF;
}

JavaScript

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');



// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {

    // Save the state, so we can undo the clipping
    ctx.save();

var xoff = 10;
var yoff = 10;
    
    // Create a shape, of some sort
  ctx.beginPath();
  ctx.moveTo(29 + xoff, 55 + yoff);
  ctx.bezierCurveTo(18 + xoff, 37 + yoff, 39 + xoff, 16 + yoff, 48 + xoff, 28 + yoff);
  ctx.bezierCurveTo(82 + xoff, 75 + yoff, 162 + xoff, 5 + yoff, 155 + xoff, 18 + yoff);
  ctx.bezierCurveTo(128 + xoff, 73 + yoff, 154 + xoff, 123 + yoff, 167 + xoff, 131 + yoff);
  ctx.bezierCurveTo(186 + xoff, 143 + yoff, 111 + xoff, 145 + yoff, 96 + xoff, 148 + yoff);
  ctx.bezierCurveTo(81 + xoff, 151 + yoff, 24 + xoff, 154 + yoff, 34 + xoff, 135 + yoff);
  
  ctx.closePath();
  // Clip to the current path
  ctx.clip();
    
  ctx.drawImage(img, 0, 0);
    
    // Undo the clipping
    ctx.restore();
}

// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";