Question

I’ve a very strange requirement, I’ve an image(Image has slight gradient effect) which center portion need to be shown with the color change with the user score
colour 255,255,0 for High Score and 155,155,55 for Low Score

Now I want to know which way should I do it, I tried it with the HTML5 Canvas but that wouldn’t work with the IE, so I’m discarding this option

I don’t know it can be done with the css or not

Or with the GD lib using PHP

HERE is the image
http://i47.tinypic.com/b88l13.png

Thanks

Answer 1

I have developed several projects using the Processing.js library and I fell in love with it. If you want you can try it, you could do what you asked in a few lines using
http://processingjs.org/reference/tint_/ .

PImage b; 
b = loadImage("http://i47.tinypic.com/b88l13.png");

void setup(){
  size(200,200);
}

void draw(){  
   tint(255, 0, 0); 
   image(b, 0, 0);   
}

You may want to split the colored (pyramid) part from the background and only tint that part.

Note that in the demo I have used the Base64 version of that image to avoid cross-domain policy issues.
DEMO: http://jsfiddle.net/CrUja/

It works in IE9 and I think you can make it work in IE8 using http://code.google.com/p/explorercanvas/ (or maybe Processing.js already has this integrated)