First working version

Author: martinRenou

examples/introduction.ipynb

@@ -4,7 +4,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "# Introduction"
+    "# ipycanvas: Interactive Canvas"
    ]
   },
   {
@@ -13,6 +13,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "from math import pi\n",
+    "\n",
     "import ipycanvas"
    ]
   },
@@ -22,7 +24,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "w = ipycanvas.Canvas()"
+    "c = ipycanvas.Canvas()\n",
+    "c.layout.height = '200px'"
    ]
   },
   {
@@ -31,7 +34,39 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "w"
+    "c"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Draw smiley face\n",
+    "c.begin_path();\n",
+    "c.arc(75, 75, 50, 0, pi * 2, True); # Outer circle\n",
+    "c.move_to(110, 75);\n",
+    "c.arc(75, 75, 35, 0, pi, False); # Mouth (clockwise)\n",
+    "c.move_to(65, 65);\n",
+    "c.arc(60, 65, 5, 0, pi * 2, True); # Left eye\n",
+    "c.move_to(95, 65);\n",
+    "c.arc(90, 65, 5, 0, pi * 2, True); # Right eye\n",
+    "c.stroke();"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Draw simple triangle shape\n",
+    "c.begin_path();\n",
+    "c.move_to(75, 50);\n",
+    "c.line_to(100, 75);\n",
+    "c.line_to(100, 25);\n",
+    "c.fill();"
    ]
   }
  ],

ipycanvas/canvas.py

@@ -16,3 +16,53 @@ class Canvas(DOMWidget):
     _view_name = Unicode('CanvasView').tag(sync=True)
     _view_module = Unicode(module_name).tag(sync=True)
     _view_module_version = Unicode(module_version).tag(sync=True)
+
+    # Rectangles methods
+    def fill_rect(self, x, y, width, height):
+        """Draw a filled rectangle."""
+        self._send_canvas_msg('fillRect', x, y, width, height)
+
+    def stroke_rect(self, x, y, width, height):
+        """Draw a rectangular outline."""
+        self._send_canvas_msg('strokeRect', x, y, width, height)
+
+    def clear_rect(self, x, y, width, height):
+        """Clear the specified rectangular area, making it fully transparent."""
+        self._send_canvas_msg('clearRect', x, y, width, height)
+
+    # Paths methods
+    def begin_path(self):
+        self._send_canvas_msg('beginPath')
+
+    def close_path(self):
+        self._send_canvas_msg('closePath')
+
+    def stroke(self):
+        self._send_canvas_msg('stroke')
+
+    def fill(self):
+        self._send_canvas_msg('fill')
+
+    def move_to(self, x, y):
+        self._send_canvas_msg('moveTo', x, y)
+
+    def line_to(self, x, y):
+        self._send_canvas_msg('lineTo', x, y)
+
+    def arc(self, x, y, radius, start_angle, end_angle, anticlockwise):
+        self._send_canvas_msg('arc', x, y, radius, start_angle, end_angle, anticlockwise)
+
+    def arc_to(self, x1, y1, x2, y2, radius):
+        self._send_canvas_msg('arcTo', x1, y1, x2, y2, radius)
+
+    def quadratic_curve_to(self, cp1x, cp1y, x, y):
+        self._send_canvas_msg('quadraticCurveTo', cp1x, cp1y, x, y)
+
+    def bezier_curve_to(self, cp1x, cp1y, cp2x, cp2y, x, y):
+        self._send_canvas_msg('bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y)
+
+    def rect(self, x, y, width, height):
+        self._send_canvas_msg('rect', x, y, width, height)
+
+    def _send_canvas_msg(self, msg_name, *args):
+        self.send({'msg': msg_name, 'args': args})