Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<title>HTML Canvas Flag Wave</title>

<style type="text/css" media="screen">

	body { background:#eee }

	#flag { position:absolute; top:50%; left:50% }

</style>

<script type="text/javascript">

var h = new Image;

h.onload = function(){

	var flag = document.getElementById('flag');

	var amp = 20;

	flag.width  = h.width;

	flag.height = h.height + amp*2;

	flag.getContext('2d').drawImage(h,0,amp,h.width,h.height);

	flag.style.marginLeft = -(flag.width/2)+'px';

	flag.style.marginTop  = -(flag.height/2)+'px';

	var timer = waveFlag( flag, h.width/10, amp );

};

h.src = 'gkhead.jpg';



function waveFlag( canvas, wavelength, amplitude, period, shading, squeeze ){

	if (!squeeze)    squeeze    = 0;

	if (!shading)    shading    = 100;

	if (!period)     period     = 200;

	if (!amplitude)  amplitude  = 10;

	if (!wavelength) wavelength = canvas.width/10;



	var fps = 30;

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

	var   w = canvas.width, h = canvas.height;

	var  od = ctx.getImageData(0,0,w,h).data;

	// var ct = 0, st=new Date;

	return setInterval(function(){

		var id = ctx.getImageData(0,0,w,h);

		var  d = id.data;

		var now = (new Date)/period;

		for (var y=0;y<h;++y){

			var lastO=0,shade=0;

			var sq = (y-h/2)*squeeze;

			for (var x=0;x<w;++x){

				var px  = (y*w + x)*4;

				var pct = x/w;

				var o   = Math.sin(x/wavelength-now)*amplitude*pct;

				var y2  = y + (o+sq*pct)<<0;

				var opx = (y2*w + x)*4;

				shade = (o-lastO)*shading;

				d[px  ] = od[opx  ]+shade;

				d[px+1] = od[opx+1]+shade;

				d[px+2] = od[opx+2]+shade;

				d[px+3] = od[opx+3];

				lastO = o;

			}

		}

		ctx.putImageData(id,0,0);		

		// if ((++ct)%100 == 0) console.log( 1000 * ct / (new Date - st));

	},1000/fps);

}



</script>

</head><body>

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

</body></html>
when change the image, effect not work in chrome. Please help