Canvas demo, drag&drop

This is a basic example how to make a dynamic canvas with a drag'n'drop item, the canvas itself gets cleared after every time the "squircle" gets moved. View source for complete script.

The squircle method here just make the squircle vector lines and do not do anything (compare with superellipse clip image demo). Note the save/restore used to reset the x/y coords since a translate is used for moving the whole x/y grid to make it easier to calculate the form:

this.squircle=function (x,y,size){ // squircle=square+circle

      var hsize=size/2; // half size

      x-=hsize; // reposition in the middle

      y-=hsize;

      this.ctx.save();

      this.ctx.translate(x,y);

      this.ctx.beginPath();

      this.ctx.moveTo(hsize,0);

      this.ctx.bezierCurveTo(0,0,0,0,0,hsize);

      this.ctx.bezierCurveTo(0,size,0,size,hsize,size);

      this.ctx.bezierCurveTo(size,size,size,size,size,hsize);

      this.ctx.bezierCurveTo(size,0,size,0,hsize,0);

      this.ctx.closePath();

      this.ctx.restore();

    }

A squircle is a combination of a square and a circle and is a perfectly symmetrical superellipse, this is a variant where we use bezier curves with control points in the squares corners.
The rounded curve uses bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
(Set positions of first controlpoint, second controlpoint and the where the line should be drawn to.)

After the call to squircle, we use the stroke() and fill() function to draw on the canvas, as you can see the styling is pretty much self explanatory:

this.draw=function(x,y){

      this.clear();

      this.squircle(x,y,50);  // make a squircle at position x,y with and height of 50

      this.ctx.strokeStyle="darkgreen";

      this.ctx.lineWidth=5;

      this.ctx.stroke();

      this.ctx.fillStyle = "green";

      this.ctx.fill();

    }

Explorer Canvas is included in this script to get a cross browser support (ie-support-js/excanvas.js).

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

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