Creating a superelipse with canvas

Today a colleague asked a group of front-end developers how he would create a superelipse.

A superelipse

His current solution was to use a svg mask to remove all non essential visual information. This solution however had a setback, because we used a mask to shield the edges we had no real transparency. Thus we were unable to effectively use it on more graphic backgrounds.

I however thought it should be able to use canvas to provide the solution. The code below is my solution.  Continue reading