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
  },
  with: function (fillPattern) {
    this.context.fillStyle = fillPattern
    return this
  },
  of: 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)
  .with("maroon")
  .of(20)
  .at(300, 300)
  .at(260, 260)
  .with("teal")
  .at(28, 28)
  .of(38)
  .with("navy")
  .at(100, 100)

var d = new Circle()
d.in(context).with("lime").of(23).at(30, 300)