Best way to mask an image in HTML5

Question

I was wondering what is the best way to mask images in HTML 5 ?

In fact I would like to display circle thumbnails in a gallery without bothering my client with the preparation of the circular pictures...

So I have, in my opinion, two options : Canvas masking or old fashioned way

Do you have others ideas ? Best practices ?

Thanks

Answer 1

you could use

• the old fashioned way - by using a transparent png on top of the desired element
• the css3 border-radius of the image set to half of it's dimensions (so that the border defines a circle)
• the css3 mask and mask-clip properties (here's a nice demo : http://www.webkit.org/blog/181/css-masks/)
• canvas to do the masking
• svg circles with the image as background-pattern

The choice depends on the targeted browsers and the time you want to invest.
For a fully cross-browser result, I recommend the old fashioned way, but if you want more shapes (maybe dynamic ones) or more than just image masking, you could try svg or canvas.