I have an image which is essentially a star-burst effect. The color of the star-burst is white, and the background is transparent (PNG w/ Alpha). I randomly generate these star-bursts onto an HTML5 canvas at random locations, and at the same time, generate random Hue, Saturation, and Light (HSL) values. These could be RGB values, if this simplifies things.
The goal is to re-colorize the PNG for display on the HTML5 canvas based on the randomly generated HLS values before rendering it to the canvas.
I've read some other posts on StackOverflow and other sites, but the only solutions I've seen involve rendering it to the canvas, grabbing the coordinates for where the image is displaying, and modify the color on a pixel-by-pixel basis. In theory this could work, however some of the images may overlap slightly. Also if there is a background already present, then from what I understand, the background's color would also be modified which isn't much of a solutions for me either.
If this is out of the realm of what Canvases are capable of, as a fallback I suppose I would be okay with having images dynamically re-colored via PHP using GD2 or Imagick, or via the command-line via Gimp, ImageMagick or some other image library...
Thanks much!
-- OUTCOME --
Special thanks to @jing3142 for initial suggestion of off-screen canvas rendering, and @Jarrod for providing the vital piece I was missing: globalCompositeOperation = "source-in"
Here is a working implementation of the concept: http://jsfiddle.net/fwtW2/2/
Works in:
I'm pretty sure you can just use the source-in globalCompositeOperation opertaion? No need to get all hardcore and crazy with vector images.
This code is where the magic happens:
var color = 'red';
ctx.fillStyle = color;
ctx.globalCompositeOperation = "source-in";
But yOu'd need to re-draw this to an offscreen canvas: You can do that like so
createBuffer = function(sizeW, sizeH)
{
buffer = document.createElement('buffer');
bufferCtx = buffer.getContext('2d');
buffer.width = sizeW;
buffer.height = sizeH;
}
then just draw your image to the offscreen canvas and apply the global composition.
How about a second canvas that has the size of the image, place the image on that canvas, re-colour as required, extract re-coloured image and place at random on main canvas, re-colour image on second canvas using new HSL values, extract and randomly place on main canvas and repeat?
This may help as well https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas
Here’s how to easily recolor your starbursts just before rendering on canvas
Convert your starburst.png into a vector path! (I know, you will have to drag out Gimp/Illustrator for this one time—but it’s worth it!)
Starburst paths can have fills and the fills can be solid colors or even gradients—as fancy, random recoloring as you need!
Starburst paths can scale without the pixilation of raster images like .png’s.
Starburst paths can rotate to show diversity in your bursts--and even skew to represent a bit of 3d motion.
If you want to get fancy, you can even create “glowing” bursts by using shadows and blurs.
Starburst paths are faster to render than .png images—especially if you need to manipulate each .png before drawing.