Changing a flat image's color with jQuery

I have a flat white circular image (as in a seriously flat #ffffff image). Is there a way I can change it's color in the context of an HTML page (let's assume PNG, so we're working with an RGBA raster)?

My environment uses jQuery, so I'm inclined to think within the jQuery mindset, but if something else makes this possible, I'd like to hear about it as well.

I'm not well versed with the capabilities of Canvas so much, but maybe that can do something like this. With respect to browser support however, I'd really appreciate it if the solution can touch base with IE6 (yeah, I know it's dead, but bear with me 开发者_Go百科on this one).

Have you thought about using a canvas and drawing the circle below the image, then change it's color? Following on from the other answer and make the image transparent and then layer it about the canvas.

http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

You can 'emulate' a circle in browsers that support border radius. Try;

<div class="circle"/>

.circle{
    background:blue;
    border: 1px solid red;
    border-radius: 50px 50px 50px 50px;
    height: 100px;
    width: 100px;
}

Then change background-color accordingly.

Yeah, I know, no IE6 support but maybe you could fall back on the transparent image effect as mentioned above

Ended up utilizing canvas after all. Scrapping the image idea, and just going with drawing the circles using canvas (and jCanvas to make it modular with the jQuery environ). Basically going with treating the <canvas> tag itself as the <img> equivalent, and maybe work with dynamically creating them as needed.

To get it working with pre-IE9 browsers (where HTML5 support is non-existent), there's a nifty lib out there called ExplorerCanvas which brings the canvas functionality to pre-IE9 browsers (it certainly works with the IE7 quirks mode on IE9 at least).

There's expectedly a performance drop if you're going to be performing canvas animations on ExplorerCanvas, but since this is all just 2D static, it shouldn't be too much of a problem.

There's also the matter of dealing with dynamic <canvas> elements with ExplorerCanvas, but that should be easily remedied.