Speeding-up Indexed Color images operations, pseudo-palette shifting and color cycling techniques in HTML5 canvas

Question

recently I've created this little experiment in Javascript (here the source code). It is a little attempt to simulate old video game engines inside a web page taking advantage of the HTML5 canvas object. So I've simulated indexed color images, pseudo-color palette and Palette Shifting and in future I will implement Color Cycling technique too.

Due to the fact this application is strongly based upon pixels manipulation I need to work at low level: I started using the

2dcontext.getImageData()

and

2dcontext.putImageData()

functions. Unfortunately to simply render a 640x480 image using these functions causes the frame rate to dangerously fall down.

I've tested an alternative method creating a series of 1x1 rectangles with

2dcontext.fillRect()

but this seems to go much slower.

I know that WebWorkers are not the solution: they only will help in multithreaded situations.

I thought that maybe moving all calculation to GPU instead of using CPU expensive method like

2dcontext.getImageData()

and

2dcontext.putImageData()

could help. But what the best way to do it, considering I always need to access single pixels color information all the time if I want to implement Palette Shifting and Color Cycling techniques? Is WebGL a solution? Is it possible to create a custom shader program that can do what I need (link)?

thank you very much for the support!