Canvas blurred image

Draw an image on a HTML canvas with a blurred/feather edge.

by Arjan Haverkamp

HTML

<canvas id="canvas"></canvas>

CSS

body{ background-color:#fff; padding:10px;}
canvas{border:1px solid #000; }

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var blur = 42;

var img = new Image();
img.onload = function() {
	var mask = document.createElement('canvas');
	var mctx = mask.getContext('2d');
	var w = this.width, h = this.height;

	canvas.width = mask.width = w;
	canvas.height = mask.height = h;
	
	mctx.fillStyle = '#000';
	mctx.shadowBlur = blur;
	mctx.shadowColor = '#000';
	mctx.shadowOffsetX = w;
	mctx.shadowOffsetY = h;
	mctx.fillRect( -w + blur, -h + blur, w - blur * 2, h - blur * 2 );
	ctx.drawImage(mask,0,0);

	ctx.globalCompositeOperation = 'source-in'
	ctx.drawImage(img,0,0);
}
img.src = 'http://misc.avoid.org/chip.png';