When we need to clip an irregular shape from an image and use it on the web, PNG is the most common answer as it is the only image format used by all web browsers that support alpha channels.However, PNG images come with a penalty of size (if the source is a photograph) compared to similar sized JPEGs.polyClip.js is a script, built on jQuery, that allows us to clip any image with imagemap coordinates using HTML5 Canvas.
Core Java Script HTML5