I'm currently working on a random image generator, which combines different .png files (attributes) into one image. I have managed to get these working, however there's one part I want for my project that I haven't been able to find out how to do.

I realise there are ways to do this in CSS and HTML, however neither of these suffice for what I need. The character is generated in the JavaScript portion of my code, and thus for it to work I need JavaScript.

Here's an example of a piece of code in JavaScript that generates one of the body parts. In this case, it's the body.

        //body
    var characterbody = new Image();
    var characterbodynum=Math.floor(Math.random()*4)+1; 
    var characterbodyname="body" + characterbodynum + ".png";
    characterbody.src=characterbodyname;

To explain this code: The first line indicates an image. The second line indicates to the computer that there are four images, and one should be randomly selected. The third line indicates based on files saved to my computer it needs to find a file named "body", followed by a number, and then .png on the end. For example, if the random whole number between 1 and 4 chooses the number 3, it picks body3.png and places that .png file into the overall image.

What I want now is an overlay to be added which will randomly select a hue value and shift the hue of the picture that amount. Preferably, I'd like it to work like the code above somewhat so it will be easy to implement into my code.

I'm guessing, but I could be wrong, is the style.filter the right code to use to do this?