var width = 400,
height = 300,
canvas = document.getElementById('c'),
ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
//reset the whole fucking array
var resultPixels = new Array();
var sourcePixels = new Array();
resultPixels.length = width * height;
sourcePixels.length = width * height;
for(n=0; n<width*height; n++)
{
resultPixels[n] = 0;
sourcePixels[n] = 0;
}
//setting canvas size
canvas.addEventListener("mousemove", onClick)
function onClick(e)
{
var x = e.offsetX; //e.pageX - 8;
var y = e.offsetY; //e.pageY - 8;
sourcePixels[y * width + x] = 1000;
}
function update()
{
var imageData = ctx.getImageData(0, 0, width, height);
var pixels = imageData.data;
var totalpixels, totalvalue, newvalue;
for (var x=1; x<width-1; x++)
for (var y=1; y<height-1; y++)
{
totalvalue = 0;
totalpixels = 4.0;
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 += sourcemappixels[( (y-1) * width + (x-1)) * 4];
//totalvalue += (sourcemappixels[( (y-1) * width + (x)) * 4] - 0);
//totalvalue += sourcemappixels[( (y-1) * width + (x+1)) * 4];
//totalvalue += (sourcemappixels[( y * width + (x-1)) * 4] - 0);
//totalvalue += (sourcemappixels[( y * width + (x+1)) * 4] - 0);
//totalvalue += sourcemappixels[( (y+1) * width + (x-1)) * 4];
//totalvalue += (sourcemappixels[( (y+1) * width + (x)) * 4] - 0);
//totalvalue += sourcemappixels[( (y+1) * width + (x+1)) * 4];
totalvalue /= totalpixels;
newvalue = totalvalue - resultPixels[y* width + x];
newvalue = newvalue - newvalue/64.0; //some damping it seems
resultPixels[y* width + x] = newvalue;
}
for(n=0; n<width*height; n++)
{
pixels[n*4] = resultPixels[n] + 128;
pixels[n*4 + 1] = resultPixels[n] + 128;
pixels[n*4 + 2] = resultPixels[n] + 128;
pixels[n*4 + 3] = 255;
var temp = sourcePixels[n];
sourcePixels[n] = resultPixels[n];
resultPixels[n] = temp;
}
ctx.putImageData(imageData, 0, 0);
}
var FPS = 30;
setInterval(function(){update();}, 1000/FPS);
<html>
<head>
<title>Simple game with HTML5 Canvas</title>
</head>
<body>
<canvas id='c'></canvas>
</body>
</html>