Canvas demo, clip image as a superellipse

This is an example how to make a masking clip out of any image on a web page in a superellipse-like form. In this example I have set classnames, class="superellipse" and class="rounded", the second as a comparison for a classic rounded corner.

Explanation of the script

View source for complete script! The html looks like this:

    <img src="gina.jpg" width="400" height="300" class="superellipse" />

    <img src="gina.jpg" width="400" height="300" class="rounded positionthis" />

The images on the page is hidden and a canvas element is created (see function replaceImgs()). A clip() is made in canvas, and this works like a mask for further use in the canvas. quadraticCurveTo is used for the rounded corner here we need a radius for the corner so a size of 50 is added to the function).
bezierCurveTo is used for the superellipse:

    function superellipse(cnode){ // canvasnode, mask out the corners to a superellipse

      var w=cnode.offsetWidth;

      var h=cnode.offsetHeight;

      var ysize=h/2;

      var xsize=w/2;

      var ctx = cnode.getContext("2d");

      ctx.beginPath();

      ctx.moveTo(xsize,0);

      // bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) the control points are in the corner

      ctx.bezierCurveTo(0,0,0,0,0,ysize);

      ctx.bezierCurveTo(0,h,0,h,xsize,h);

      ctx.bezierCurveTo(w,h,w,h,w,ysize);

      ctx.bezierCurveTo(w,0,w,0,xsize,0);

      ctx.closePath();

      ctx.clip();

      return ctx;

    }

Also the classnames of the image is transferred to the new canvas element so they will have the same styles, see "positionthis". After that the image is simply hidden from the view.

Browser support

Every Canvas enabled browser, though Firefox 1.5 probably doesn't work. In Google Chrome on Ubuntu the antialiasing doesn't look so good, but it still works.
Note that this script does not work with the Explorer Canvas workaround since clip is not supported.

See also drag&drop demo with squircle with IE support
Read more about Canvas

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.

Last update 2009-11-18 by Elin Tjerngren, Artopod