title: Image Masking With Canvas or SVG in Responsive Design
body: <p>I'm attempting to render the images on a site as if they were different geometric shapes. For instance, a normally square image could be displayed as a hexagon, a circle, a pentagon, an octagon, etc.</p>
  
  <p>This is a responsive site, meaning that the original images will be styled with <code>max-width: 100%;</code>, and they'll be sized depending on their container element.</p>
  
  <p>The first thought that I had was to create several transparent PNG "overlay images" with each desired geometric shape "knocked out" in the transparent area &amp; then use <code>z-index</code> to overlay the masks atop the original images.</p>
  
  <p>Is there a better way to do this with canvas or SVG (or even something else) and still allow for the image and mask to evenly resize as the browser window resizes? What performance considerations do I need to account for?</p>
  
  <p>The final production code will be using jQuery, so if I need it for any of these approaches, it will be there.</p>