HTML5のCanvasで画像をパス（丸）でマスクする

clipを使用した例

「clip」メソッドを使用することで画像にマスクを掛けることができます。
下記は単純な丸を描いてマスクした例です。

    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var img = document.createElement('img');
    img.src = '01.jpg';
    img.onload = function () {
        ctx.beginPath();
        ctx.arc(90, 90, 80, 0, Math.PI*2, false);
        ctx.clip();
        ctx.drawImage(img, 0, 0);
    }
	

この方法が一番スマートに思えますが、Chromeだとジャギーがひどいですね。
IE、Firefoxでは問題ないのですが……。

背景パターンとして塗りつぶした例

パスの背景を画像パターンで塗りつぶすことでマスクを再現することもできます。
塗りつぶしには「createPattern」メソッドを使用します。

    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var img = document.createElement('img');
    img.src = '01.jpg';
    img.onload = function () {
        ctx.beginPath();
        ctx.arc(90, 90, 80, 0, Math.PI*2, false);
        ctx.clip();
        ctx.drawImage(img, 0, 0);
    }
    

合成モードを変更した例

「globalCompositeOperation」で合成モードの設定ができます。
「destination-atop」を指定すればで重なった部分だけ表示することになるのでマスクっぽいことができます。

    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var img = document.createElement('img');
    img.src = '01.jpg';
    img.onload = function() {
		ctx.drawImage(img, 0, 0);
		//合成モードの変更（重なった部分だけ表示）
		ctx.globalCompositeOperation = "destination-atop";
		ctx.beginPath();
		ctx.arc(90, 90, 80, 0, Math.PI*2, false);
		ctx.fill();
		//合成モードを通常に戻す
		ctx.globalCompositeOperation = "source-over";
	}