Add fill_polygon and stroke_polygon methods

Signed-off-by: martinRenou <[email protected]>

Author: martinRenou

ipycanvas/canvas.py

@@ -29,7 +29,7 @@
     'bezierCurveTo': 26, 'fillText': 27, 'strokeText': 28, 'setLineDash': 29, 'drawImage': 30,
     'putImageData': 31, 'clip': 32, 'save': 33, 'restore': 34, 'translate': 35,
     'rotate': 36, 'scale': 37, 'transform': 38, 'setTransform': 39, 'resetTransform': 40,
-    'set': 41, 'clear': 42, 'sleep': 43,
+    'set': 41, 'clear': 42, 'sleep': 43, 'fillPolygon': 44, 'strokePolygon': 45,
 }
 
 
@@ -551,6 +551,25 @@ def stroke_circles(self, x, y, radius):
 
         self._send_canvas_command(COMMANDS['strokeCircles'], args, buffers)
 
+    # Polygon methods
+    def fill_polygon(self, points):
+        """Fill a polygon from a list of points ``[(x1, y1), (x2, y2), ..., (xn, yn)]``."""
+        args = []
+        buffers = []
+
+        populate_args(points, args, buffers)
+
+        self._send_canvas_command(COMMANDS['fillPolygon'], args, buffers)
+
+    def stroke_polygon(self, points):
+        """Draw polygon outline from a list of points ``[(x1, y1), (x2, y2), ..., (xn, yn)]``."""
+        args = []
+        buffers = []
+
+        populate_args(points, args, buffers)
+
+        self._send_canvas_command(COMMANDS['strokePolygon'], args, buffers)
+
     # Lines methods
     def stroke_line(self, x1, y1, x2, y2):
         """Draw a line from ``(x1, y1)`` to ``(x2, y2)``."""

src/widget.ts

@@ -69,7 +69,7 @@ const COMMANDS = [
   'bezierCurveTo', 'fillText', 'strokeText', 'setLineDash', 'drawImage',
   'putImageData', 'clip', 'save', 'restore', 'translate',
   'rotate', 'scale', 'transform', 'setTransform', 'resetTransform',
-  'set', 'clear', 'sleep',
+  'set', 'clear', 'sleep', 'fillPolygon', 'strokePolygon',
 ];
 
 
@@ -361,6 +361,12 @@ class CanvasModel extends DOMWidgetModel {
       case 'strokeLine':
         this.strokeLine(args, buffers);
         break;
+      case 'fillPolygon':
+        this.fillPolygon(args, buffers);
+        break;
+      case 'strokePolygon':
+        this.strokePolygon(args, buffers);
+        break;
       case 'fillPath':
         await this.fillPath(args, buffers);
         break;
@@ -494,6 +500,34 @@ class CanvasModel extends DOMWidgetModel {
     this.ctx.closePath();
   }
 
+  protected fillPolygon(args: any[], buffers: any) {
+    this.ctx.beginPath();
+    const points = getArg(args[0], buffers);
+
+    // Move to the first point, then create lines between points
+    this.ctx.moveTo(points.getItem(0), points.getItem(1));
+    for (let idx = 2; idx < points.length; idx += 2) {
+      this.ctx.lineTo(points.getItem(idx), points.getItem(idx + 1));
+    }
+
+    this.ctx.closePath();
+    this.ctx.fill();
+  }
+
+  protected strokePolygon(args: any[], buffers: any) {
+    this.ctx.beginPath();
+    const points = getArg(args[0], buffers);
+
+    // Move to the first point, then create lines between points
+    this.ctx.moveTo(points.getItem(0), points.getItem(1));
+    for (let idx = 2; idx < points.length; idx += 2) {
+      this.ctx.lineTo(points.getItem(idx), points.getItem(idx + 1));
+    }
+
+    this.ctx.closePath();
+    this.ctx.stroke();
+  }
+
   protected async fillPath(args: any[], buffers: any) {
     const [serializedPath] = args;
 
@@ -668,6 +702,28 @@ class RoughCanvasModel extends CanvasModel {
     this.roughCanvas.arc(x, y, ellipseSize, ellipseSize, start, end, false, this.getRoughStrokeStyle());
   }
 
+  protected fillPolygon(args: any[], buffers: any) {
+    const points = getArg(args[0], buffers);
+
+    const polygon: [number, number][] = [];
+    for (let idx = 0; idx < points.length; idx += 2) {
+      polygon.push([points.getItem(idx), points.getItem(idx + 1)]);
+    }
+
+    this.roughCanvas.polygon(polygon, this.getRoughFillStyle());
+  }
+
+  protected strokePolygon(args: any[], buffers: any) {
+    const points = getArg(args[0], buffers);
+
+    const polygon: [number, number][] = [];
+    for (let idx = 0; idx < points.length; idx += 2) {
+      polygon.push([points.getItem(idx), points.getItem(idx + 1)]);
+    }
+
+    this.roughCanvas.polygon(polygon, this.getRoughStrokeStyle());
+  }
+
   protected async setAttr(attr: number, value: any) {
     if (RoughCanvasModel.ROUGH_ATTRS[attr]) {
       (this as any)[RoughCanvasModel.ROUGH_ATTRS[attr]] = value;