index.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Superelipse</title>
	<style>
		body {
			background:url(icon.png) top left no-repeat;
		}
		#canvas {
			background:url(superellipse.jpg) center center;
		}
	</style>
</head>
<body>
	<canvas id="c" widt="800" height="800" ></canvas>

	<script>
		// Mathias Stav Mit Style License
		// Based upon Andrea Giammarchi's circle and ellipse functions
		(function(){
		var extend = {
		    // curvedOctagon methods
		    curvedOctagon:function(aX, aY, aWidth, aHeight, cpd, bts){
		        var hB = (aWidth / cpd) * .5522848, //the curve point offset
		            vB = (aHeight / cpd) * .5522848,
		            eX = aX + aWidth,
		            eY = aY + aHeight,
		            mX = aX + aWidth / 2,
		            mY = aY + aHeight / 2,
		            space = aWidth/4;
		       	this.moveTo(aX, mY); //This is left
		        this.lineTo(aX, mY-space); //A bit up
		        this.bezierCurveTo(aX, mY - vB, mX - hB, aY, mX-space, aY); //make a curve to top
		        this.lineTo(mX+space, aY); //Move a bit right
		        this.bezierCurveTo(mX + hB, aY, eX, mY - vB, eX, mY-space); //Curve to the right
		        this.lineTo(eX, mY+space); //Move a bot down
		        this.bezierCurveTo(eX, mY + vB, mX + hB, eY, mX+space, eY); //Curve to the bottom
		        this.lineTo(mX-space, eY); //Move a bit left
		        this.bezierCurveTo(mX - hB, eY, aX, mY + vB, aX, mY+space); //Curve to the left
		    },
		    fillCurvedOctagon:function(aX, aY, aWidth, aHeight, cpd){
		        this.beginPath();
		        this.curvedOctagon(aX, aY, aWidth, aHeight, cpd);
		        this.fill();
		    },
		    strokeCurvedOctagon:function(aX, aY, aWidth, aHeight, cpd){
		        this.beginPath();
		        this.superellipse(aX, aY, aWidth, aHeight, cpd);
		        this.stroke();
		    }
		};
		for(var key in extend)
		    CanvasRenderingContext2D.prototype[key] = extend[key];
		if(!this.G_vmlCanvasManager)
		    G_vmlCanvasManager = {init:function(){}, initElement:function(el){return el}};
		})();

		var canvas = document.getElementById('c');
		canvas.width = 800;
		canvas.height = 800;
		var ctx = canvas.getContext('2d');
		var red = 'rgba(255, 0, 0, 0.5)';
		var black = '#000';
		ctx.fillStyle = black;
		
		var size = 121;
		ctx.fillCurvedOctagon(24.5, 41.5, size, size, size/89, true);


	</script>
</body>
</html>