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 on this one).
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.