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>