Simple Canvas cliping with anti aliasing by alpha channel of mask image or canvas shape.

canvasMatte.html

<canvas id="show" width="300" height="300"></canvas>

cavasMatte.js

var scratchCropCanvas = null

function createCanvas(width, height){
  var canvas = document.createElement('canvas');
  canvas.width  = width || 100;
  canvas.height = height || 100;
  
  return canvas;
}

function cropRadial(image, width, height){
  width = width || 100
  height = height || 100
  
  if (!scratchCropCanvas){
    scratchCropCanvas = createCanvas(width, height)
  }
  else {
    scratchCropCanvas.width = width
    scratchCropCanvas.height = height
  }
  
  var canvas = scratchCropCanvas,
      ctx = canvas.getContext('2d')
  
  ctx.drawImage(image, 0, 0)
  
  ctx.globalCompositeOperation = 'destination-in'
  ctx.beginPath()
  ctx.arc(width/2, width/2, height/2, 0, 2 * Math.PI, true)
  ctx.fill()
  
  return canvas
}

function maskImage(image, maskImage, width, height){
  width = width || maskImage.width
  height = height || maskImage.height
  
  if (!scratchCropCanvas){
    scratchCropCanvas = createCanvas(width, height)
  }
  else {
    scratchCropCanvas.width = width
    scratchCropCanvas.height = height
  }
  
  var canvas = scratchCropCanvas,
      ctx = canvas.getContext('2d')
  
  ctx.drawImage(image, 0, 0)
  
  ctx.globalCompositeOperation = 'destination-in'
  
  ctx.drawImage(maskImage, 0, 0)
  
  return canvas
}

canvas = document.getElementById("show");
context = canvas.getContext("2d");

var im = new Image();
im.onload = function () {
  context.beginPath();
  context.rect(0, 0, canvas.width, canvas.height);
  context.fillStyle = 'red';
  context.fill();
  
  var cvMask = createCanvas(300, 300),
      ctxMask = cvMask.getContext('2d')
  
  ctxMask.fillStyle = 'blue';
  ctxMask.beginPath()
  ctxMask.arc(cvMask.width/2, cvMask.width/2, cvMask.width/2-10, 0, 2 * Math.PI, true)
  ctxMask.fill()

  context.drawImage(maskImage(im, cvMask), 0, 0);
  //context.drawImage(cropRadial(im, 290, 290), 0, 0);

}

im.src = "http://placekitten.com/300/300";