canvas circle api init

by jshacker

HTML

<canvas id="canvas" height="400" width="400"></canvas>

CSS

canvas {
  outline: thin solid #333;
}

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

function Circle() {
  this.startAngle = 0;
  this.endAngle = 2 * Math.PI;
  this.antiClockwise = false; /* not needed for circle */
}

Circle.prototype = {
	in: function(context) {
  	this.context = context;
    return this;
  },
  withPattern: function(fillPattern) {
  	this.context.fillStyle = fillPattern;
    return this;
  },
  ofRadius: function(radius) {
		this.radius = radius;
    return this;
  },
	at: function(x, y) {
  	this.context.beginPath();
  	this.context.arc(x, y, this.radius, this.startAngle, this.endAngle, this.antiClockwise);
    this.context.closePath();
    this.context.fill();
    return this;
  }
};

var c = new Circle();
c.in(context).withPattern('blue').ofRadius(10).at(300, 300)
	.at(260, 260)
  .withPattern('red').at(28, 28)
  .ofRadius(30).withPattern('yellow').at(100, 100);
  
var d = new Circle();
d.in(context).withPattern('grey').ofRadius(10).at(30, 300);