Search code examples
htmlcanvascssmask

Best way to mask an image in HTML5

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

Solution

  • 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.