Wednesday, November 18, 2015

Javascript: Canvas circles

So we always start:

var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");

and we have the basic:

c.fillRect
c.fillText
c.strokeRect
c.strokeText

and for all other shapes we use paths

I use a lot of circles so why not add:

c.fillCircle
c.strokeCircle

We can do that by adding some functions to the prototype of the c with is the CanvasRenderingContext2D:

CanvasRenderingContext2D.prototype.fillCircle = function(x, y, r) {
  this.beginPath();
  this.arc(x, y, r, 0, 2 * Math.PI);
  this.fill();
};

CanvasRenderingContext2D.prototype.strokeCircle = function(x, y, r) {
  this.beginPath();
  this.arc(x, y, r, 0, 2 * Math.PI);
  this.stroke();
};


done_