Customize Colors for Sprites in Web Game

Question

So I'm working on an html5/javascript/css3-based game. Without going into too much detail, I'm thinking of having the characters be simple 8 or 16-bit style sprites, but I'd like to allow the user to customize the colors of their character.

Here are some examples of what I'm talking about :

http://jsfiddle.net/simurai/CGmCe/light/
http://www.splashnology.com/article/sprite-animation-in-css3/1485/

So the problem I'm having is two-fold:

1) Should I use something other than a sprite map for my characters, like actually draw them as shapes and animate them in a canvas element? That way I can fill the sprite with colors of the user's choosing? My fear there is that this would be inefficient as far as resources and also waste a lot of time hand-drawing everything, but could allow other customization (like height/width etc).

2) Are there potentially some web apis that would allow you to alter colors inside of a sprite? I suppose I could do it on the back-end with GD, but I'm trying to make it entirely in-browser (including local storage).

It's not a definitive one-answer only question, but I'm hoping someone can suggest something they've seen that approaches the same problem from another angle or gives us a way to customize the sprites or manipulate them in some manner. Or avoid them altogether, and use a different method.

Answer 1

Answer to 1 & 2

Color Palette changing ->Take a look here<- Showing both client & server side color pallete changing in the two answers.

After you altered the pixels to your will. Retrieve the DataURL by calling

var newImgSrc = canvas.toDataURL(); //gets a base64 encoded PNG image

Now for a CSS3 game, edit the src attribute of the tag if it's added to the DOM.

imgInDom.setAttribute('src',newImgSrc); //Or use a jQuery equivalent function.

OR,

var newImg = new Image(); //create a new Image object
//document.createElement('img') does the same stuff.
//render image after it loads or else you wont see anything on the canvas.
newImg.onload = function(){
   //render it or append it to the DOM
}
newImg.src = newImgSrc; //specify the src of the Image, loads almost instantaneously
//For a CSS3 game, you may skip the onload handler function.
//And directly append the element to the DOM.

See more at MDN & Google Search