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 = {
    fillAt: 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;
    },
    fillWith: function (fillPattern) {
        this.context.fillStyle = fillPattern;
        return this;
    },
    in: function (context) {
        this.context = context;
        return this;
    },
    of: function (radius) {
        this.radius = radius;
        return this;
    },
    drawAt: function(x, y) {
        this.context.beginPath();
        this.context.arc(x, y, this.radius, this.startAngle, this.endAngle, this.antiClockwise);
        this.context.closePath();
        this.context.stroke();
        return this;
    },
    drawWith: function (options) {
        this.context.strokeStyle = options.strokePattern;
        this.context.lineWidth = options.lineWidth;
        return this;
    }
};

var c = new Circle();
c.in(context).fillWith('maroon').of(20).fillAt(300, 300)
	.fillAt(260, 260)
  .fillWith('teal').fillAt(28, 28)
  .of(38).fillWith('navy').fillAt(100, 100);
  
var d = new Circle();
d.in(context).fillWith('lime').of(23).fillAt(30, 300);

var e = new Circle();
e.in(context).drawWith({strokePattern: 'black', lineWidth: 4}).of(10).drawAt(300, 30)
.drawWith({strokePattern: 'blue', lineWidth: 3}).of(20).drawAt(300, 20)
.drawWith({strokePattern: 'magenta', lineWidth: 2}).of(30).drawAt(300, 50)

.drawWith({strokePattern: 'black', lineWidth: 5}).of(30).drawAt(300, 140)
.of(27)
.fillWith('yellow').fillAt(300, 140);