Add ellipse shape

README.md

@@ -53,6 +53,7 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i
 - `(size w h)` Returns a size shape.
 - `(rect x y w h)` Returns a rect shape.
 - `(circle cx cy r)` Returns a circle shape.
+- `(ellipse cx cy rx ry)` Returns an ellipse shape.
 - `(line ax ay bx by)` Returns a line shape.
 - `(text x y p t ~a ~f)` Returns a text shape.
 - `(svg x y d)` Returns a svg shape.

desktop/sources/scripts/library.js

@@ -70,6 +70,10 @@ function Library (ronin) {
     return { cx, cy, r }
   }
 
+  this.ellipse = (cx, cy, rx, ry) => { // Returns a ellipse shape.
+    return { cx, cy, rx, ry }
+  }
+
   this.line = (ax, ay, bx, by) => { // Returns a line shape.
     return { a: this.pos(ax, ay), b: this.pos(bx, by) }
   }

desktop/sources/scripts/surface.js

@@ -90,6 +90,8 @@ function Surface (ronin) {
     }
     if (isCircle(shape)) {
       this.traceCircle(shape, context)
+    } else if (isEllipse(shape)) {
+      this.traceEllipse(shape, context)
     } else if (isText(shape)) {
       this.traceText(shape, context)
     } else if (isSvg(shape)) {
@@ -122,6 +124,10 @@ function Surface (ronin) {
     context.arc(circle.cx, circle.cy, circle.r, 0, 2 * Math.PI)
   }
 
+  this.traceEllipse = function (ellipse, context) {
+    context.ellipse(ellipse.cx, ellipse.cy, ellipse.rx, ellipse.ry, 0, 2 * Math.PI, false)
+  }
+
   this.traceText = function (text, context) {
 
   }
@@ -287,6 +293,9 @@ function Surface (ronin) {
   function isCircle (shape) {
     return !isNaN(shape.cx) && !isNaN(shape.cy) && !isNaN(shape.r)
   }
+  function isEllipse (shape) {
+    return !isNaN(shape.cx) && !isNaN(shape.cy) && !isNaN(shape.rx) && !isNaN(shape.ry)
+  }
   function isPos (shape) {
     return !isNaN(shape.x) && !isNaN(shape.y)
   }

examples/basics/shapes.lisp

@@ -19,4 +19,8 @@
 ; draw line
 (stroke 
   (line (sub center-w rad) center-h (add center-w rad) center-h))
-(stroke (text 10 170 200 "HELL") "pink" 2)
+(stroke (text 10 170 200 "HELL") "pink" 2)
+
+; draw ellipse
+(stroke 
+  (ellipse center-w center-h rad (div rad 2)) "white" 2)