O efeito é o seguinte, pegar uma imagem e aplicar o efeito de blur usando somente javascript, sem carregar outra imagem.

Pra isso, é manipulado, pixel a pixel, colocando um pixel alpha por cima da imagem.

Veja a imagem original:

Imagem com filtro de Blur

Como a imagem é gerada automaticamente, dá pra aplicar o efeito no mousemove, ou em qualquer outra ação. Veja o exemplo abaixo.

Imagem com filtro de Blur no mousemove

Pro processamento ficar mais rápido, eu gerei um segundo canvas, só com pro efeito de criar a imagem dentro da máscara.

Todos os exemplos estão disponíveis aqui

Codando

O código é bem pequeno, fiz com menor número de linhas possíveis pra ficar bem legível.

html:

	<canvas id="pizza" width="400" height="400">
		Seu browser não suporta canvas
	</canvas>

javascript:

var Pizza = {

	// Configuração
	canvas:document.getElementById('pizza'),
	height:400,
	width:400,
	cor:'#293F8A',
	
	// Calculando variaveis pra desenhar
	_init:function(){
		Pizza.ctx = Pizza.canvas.getContext("2d");  
		Pizza.radius = Math.min(Pizza.width, Pizza.height) / 2;
		Pizza.center_x = Pizza.width/2;
		Pizza.center_y = Pizza.height/2;	
	},

	// Desenhando -  é só colocar Pizza._draw(60) pra desenhar 
	// o gráfico com 60% de ocupação
	_draw:function(percentual){
		Pizza.ctx.clearRect(0,0,Pizza.width,Pizza.height); 			
		Pizza.ctx.beginPath();
		Pizza.ctx.moveTo(Pizza.center_x, Pizza.center_y);
		Pizza.ctx.arc( 
			Pizza.center_x, 
			Pizza.center_y, 
			Pizza.radius, 
			Math.PI * (- 0.5), // inicio da fatia
			Math.PI * (- 0.5 + 2 * percentual/100), // fim da fatia
			false
		);
		Pizza.ctx.closePath();
		Pizza.ctx.fillStyle = Pizza.cor;
		Pizza.ctx.fill();				
	}	
}
Pizza._init();

E por último, o drag, onde utilizo o jQuery UI, aí fica simples:

html:

	<div id="mascara_percentual">
		<span id="slider">drag<br/>me</span>
	</div>

javascript:

$('#slider').draggable({
	containment:'#mascara_percentual',
	drag:function() {
		var left = parseInt($(this).css('left').replace('px',''));
		var percentual = parseInt(left / 350 * 100); 
		// (350 = 400 do width da mascara - 50 do width do slider)
		Pizza._draw(percentual);
	}
});

// Iniciando em 70%
$('#slider').css('left','70%'); // drag
Pizza._draw(70); // canvas