canvas helper functions

canvas gradient circle - ball

  var gradientCircle = function(x,y,r,innerColor,outerColor){
    this.beginPath();
    this.arc(x,y,r,0*Math.PI,2*Math.PI);
    var grd = this.createRadialGradient(x, y, 0, x, y, r);
    grd.addColorStop(0,innerColor);
    grd.addColorStop(1,outerColor);
    this.fillStyle = grd;
    this.fill();
    this.closePath();
  }.bind(this.ctx);

canvas rounded box - rect

// create a rounded box / rect in canvas
var roundedRect = function(x,y,w,h,round){
  if(!round){ this.rect(x,y,w,h); return; }
  this.beginPath();
  this.moveTo(x+round, y);
  this.lineTo(x+w-round, y);
  this.bezierCurveTo(x+w, y,x+w, y, x+w, y+round);
  this.lineTo(x+w, y+h-round);
  this.bezierCurveTo(x+w, y+h, x+w, y+h, x+w-round, y+h);
  this.lineTo(x+round, y+h);
  this.bezierCurveTo(x,y+h, x, y+h, x, y+h-round);
  this.lineTo(x, y+round);
  this.bezierCurveTo(x, y, x, y, x+round, y);
  this.closePath();
}.bind(this.ctx);

var fillRoundedRect = function(x,y,w,h,round){
  roundedRect(x,y,w,h,round);
  this.fill()
}.bind(this.ctx);

var strokeRoundedRect = function(x,y,w,h,round){
  roundedRect(x,y,w,h,round);
  this.stroke()
}.bind(this.ctx);