canvasで画像にマスクをかける

canvasで描画した画像にパスを指定してマスクをかける方法をメモ。

サンプルコード

パスを指定してclip()を使います。

HTML

<canvas id="canvas" width="480" height="320"></canvas>

四角形でマスクをかけてみます。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	var img = new Image();
	img.src = 'image.jpg';
	img.onload = function() {
		// マスク
		ctx.beginPath();
		ctx.moveTo(100, 50);
		ctx.lineTo(380, 50);
		ctx.lineTo(380, 280);
		ctx.lineTo(100, 280);
		ctx.clip();

		// 画像の描画
		ctx.drawImage(img, 0, 0);
	}
}

canvasでマスクをかけるデモページ1
　

円形でマスクをかけてみます。

JavaScript

window.onload = function() {
	draw();
}

function draw() {
	var canvas = document.getElementById('canvas');
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	var img = new Image();
	img.src = 'image.jpg';
	img.onload = function() {
		// マスク
		ctx.beginPath();
		ctx.arc(240, 170, 140, 0, Math.PI * 2, false);
		ctx.clip();

		// 画像の描画
		ctx.drawImage(img, 0, 0);
	}
}

canvasでマスクをかけるデモページ2
　

【参考サイト】

• canvasでマスクをかける – Qiita