Add strokeCircle, fillCircle and rectCenteredAt

README.md

@@ -107,6 +107,12 @@ Clears the canvas. If you have applied any transforms to the context this may no
 ### l.circle(x, y, r)
 Draws a path in form of a circle at `x`/`y` with a radius of `r`.
 
+### l.strokeCircle(x, y, r)
+Strokes a circle at `x`/`y` with a radius of `r`.
+
+### l.fillCircle(x, y, r)
+Fills a circle at `x`/`y` with a radius of `r`.
+
 ### l.rotateContextAt(x, y, r)
 Rotates the context at `x`/`y` by `r` radians.
 
@@ -119,6 +125,9 @@ Resets all the transforms.
 ### l.clearWithTransforms()
 Clears the canvas event if there have been transforms applied. The tansforms are preserved.
 
+### l.rectCenteredAt(x, y, w, h)
+Draws a path of a rectangle centered at `x`/`y` with a widht of `w` and a hight of `h`.
+
 ### l.fillRectCenteredAt(x, y, w, h)
 Fills a rectangle centered at `x`/`y` with a widht of `w` and a hight of `h`.
 

index.js

@@ -111,6 +111,14 @@ Leinwand.prototype.circle = function cirlce(x, y, r) {
   return this.arc(x, y, r, 0, 2 * Math.PI, false);
 };
 
+Leinwand.prototype.strokeCircle = function strokeCircle(x, y, r) {
+  return this.beginPath().circle(x, y, r).closePath().stroke();
+};
+
+Leinwand.prototype.fillCircle = function fillCircle(x, y, r) {
+  return this.beginPath().circle(x, y, r).closePath().fill();
+};
+
 Leinwand.prototype.rotateContextAt = function rotateContextAt(x, y, r) {
   return this
     .translate(x, y)
@@ -135,6 +143,11 @@ Leinwand.prototype.clearWithTransforms = function clearWithTransforms() {
     .restore();
 };
 
+Leinwand.prototype.rectCenteredAt = function rectCenteredAt(x, y, w, h) {
+  return this
+    .rect(x - w / 2, y - h / 2, w, h);
+};
+
 Leinwand.prototype.fillRectCenteredAt = function fillRectCenteredAt(x, y, w, h) {
   return this
     .fillRect(x - w / 2, y - h / 2, w, h);

test/beefy.js

@@ -26,11 +26,9 @@ img.onload = () => {
     .closePath()
     .fill()
     .stroke()
-    .beginPath()
     .fillStyle('blue')
-    .circle(50, 50, 40)
-    .fill()
-    .stroke()
+    .fillCircle(50, 50, 40)
+    .strokeCircle(50, 50, 40)
     .fillRect(200, 200, 100, 100)
     .rotateContextAt(250, 250, Math.PI / 4)
     .fillRect(200, 200, 100, 100)