Canvas: be there, or be…squircle (huh?)

I have played around with Canvas lately and made a simple test with a squircle-like form using bezier curves. Huh, squ…what? Yeah, I didn’t know either, but it’s a form of superellipse and a combination of a square and a circle – read all about it at Wikipedia.

I’ve made two demos in the same spirit, an example how to make any image into a superellipse form with canvas and a simple drag & drop your squircle demo. Internet Explorer still doesn’t support Canvas, but there are workarounds as you can see in the second demo.

So…is the Canvas technology something to care about at all? Read my article on Canvas.

Here’s a simplified copy/paste code for testing with the supposed result to the right:

<canvas id="mycanvas" width="100" height="100"></canvas>
<script type="text/javascript">

function squircle(ctx,x,y,size){
  var hsize=size/2; // half size
  x-=hsize; // reposition in the middle
  y-=hsize;
  ctx.save();
  ctx.translate(x,y);
  ctx.beginPath();
  ctx.moveTo(hsize,0);
  ctx.bezierCurveTo(0,0,0,0,0,hsize);
  ctx.bezierCurveTo(0,size,0,size,hsize,size);
  ctx.bezierCurveTo(size,size,size,size,size,hsize);
  ctx.bezierCurveTo(size,0,size,0,hsize,0);
  ctx.closePath();
  ctx.restore();
 }
 var canvas=document.getElementById("mycanvas");
 var ctx=canvas.getContext("2d");

 squircle(ctx,50,50,100);
 ctx.fillStyle = "black";
 ctx.fill(); // fill it up!

 </script>