I am a 3d technical artist. But I have a little knowledge about HTML. I have - A PNG image without alpha to be used as the background. - One or more PNG's with alpha to be composited on top of this background using the embedded alpha channels. I want to do this using the Canvas element and what I learned from searching the web is they often composite everything offscreen and then draw it to the Canvas. So if anyone could provide me with small example I would be eternally grateful. It's mainly the syntax that stumps me right now, please.
It sounds like what you're trying to do wouldn't require use of the canvas. You should simply be able to overlay your 24-bit pngs on top of the background and it should look just fine in all relatively modern browsers. <div style='background-image: url("the8bitbackground.png")'> <img src="24bitwtransparencygradients.png" /> </div> Code (markup): In that example, you'd see the background images/colors show through. Hope that helps. Canvas can be used to generate images dynamically using javascript.
I dont think that you can do that vith div tag... you have to atach those transparent elements on that main png image, and use one background image.Then you put div tags to match that transparent elements.