Water Effect on HTML5 Canvas

Water Effect on HTML5 Canvas

HTML

<html>  
  <head>  
    <title>Simple game with HTML5 Canvas</title>
    </head>  
  <body>  
    <canvas id='c'>no canvas supported :(</canvas>  
  </body>  
</html>

JavaScript

var width = 300,
    height = 300,
    canvas = document.getElementById('c'), 
    ctx = canvas.getContext('2d');

    canvas.width = width;
    canvas.height = height;

    //reset the whole fucking array
    var n;
    var resultPixels = [];
    var sourcePixels = [];
    resultPixels.length = width * height;
    sourcePixels.length = width * height;
    
    
    for(n=0; n < width*height; n++)
    {
        resultPixels[n] = 0;
        sourcePixels[n] = 0;
    }

var mx,my;

function onMMove(e)
{
    mx = e.offsetX;
    my = e.offsetY;
    sourcePixels[my * width + mx] = 255;
}

var totalpixels, totalvalue, newvalue;
var imageData, pixels;

var xdiff, ydiff, xangle, yangle, xRefraction, yRefraction, xDisp, yDisp;
            var fx, fy, temp, x, y;
    var bgpixels, bgimg;

function update()
{
    imageData = ctx.getImageData(0, 0, width, height);    
    pixels = imageData.data;
    
    //calc the result Pixels i.e. height of each point after each cycle
    for (y=1; y<height-1; y++)
        for (x=1; x<width-1; x++)
        {    
            totalvalue = 0;
            totalpixels = 4;
            
            totalvalue += sourcePixels[(y-1) * width + (x)];
            totalvalue += sourcePixels[(y+1) * width + (x)];
            totalvalue += sourcePixels[y * width + (x - 1)];
            totalvalue += sourcePixels[y * width + (x + 1)];

            totalvalue += sourcePixels[(y-1) * width + (x-1)];
            totalvalue += sourcePixels[(y-1) * width + (x+1)];
            totalvalue += sourcePixels[(y+1) * width + (x-1)];
            totalvalue += sourcePixels[(y+1) * width + (x+1)];
                        
            totalvalue = (totalvalue >> 2);
            newvalue = totalvalue - resultPixels[y* width + x];
            newvalue = newvalue - (newvalue >> 8);    //some damping it seems
            resultPixels[y* width + x]     = newvalue;
        }
        
    for (y=1; y<height-1; y++)
        for (x=1; x<width-1; x++)
        {
            xdiff...