Muy buen dia compañeros.

Estoy tratando de crear un tipo de efectos sobre un Canvas de HTML5.

El canavas actualmente tiene una imagen creada mediante javascript consiste en las clasicas Barras de Colores que salian en la televisión.




Se crearon con el siguiente codigo.

	var canvas = document.getElementById("bars");
	var ctx = canvas.getContext("2d");
	var colores = ["white", "yellow","cyan", "lime","magenta","red","blue"];
	var colores2 =["blue","black","magenta","black","cyan","black","white"];
 
	var i;
	i = 0;
	while(i < 7)	{
		ctx.fillStyle = colores[i];
		ctx.fillRect(i*182,0,(i+1)*182,537);
		i++;
	}
	i = 0;
	while(i < 7)	{
		ctx.fillStyle = colores2[i];
		ctx.fillRect(i*182,537,(i+1)*182,72);
		i++;
	}
	// Create gradient
	var grd=ctx.createLinearGradient(0,0,1274,115);
	grd.addColorStop(0,"white");
	grd.addColorStop(1,"black");
 
	// Fill with gradient
	ctx.fillStyle=grd;
	ctx.fillRect(0,609,1274,115); 
 

Y queria crear una animación asi tipo distorción.

No se que tipo de operaciones realizar en el canvas, primero pensé en agregarle alguna capa de blur

Pero preguntar aqui por si alguien ya a hecho algo similar en el Canvas HTML

Saludos

Gracias, le estoy dando una leída y me da una buena dirección para realizar los cálculos de la distorsión.

Gracias