Sign up ×

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 :

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.

share|improve this question

1 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.


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

share|improve this answer
This is great! The only thing is that I don't know where the state of the image data is stored once it's been altered, so I'm not sure if applying a sprite-based css3 animation will negate the color change on the canvas. The server-side solution can work too but I'd rather keep it client-side. –  NateDSaint Jun 8 '12 at 22:22
Use context.getImageData(left, top, width, height); Read more from the MDN link –  Shourav Bin Rabbani Jun 9 '12 at 5:24
I do have an additional part of the question though, which I can answer for myself by testing, but for the purposes of the Q&A nature of the site I can leave here as a query: Would it be more efficient (in performance cost, not labor) to use canvas to draw the elements themselves instead of loading in an image and then editing the pixels? –  NateDSaint Jun 11 '12 at 13:54

Your Answer


