Add line_join parameter

Author: martinRenou

examples/lines.ipynb

@@ -23,9 +23,11 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "size = (200, 140)\n",
+    "size = (400, 280)\n",
     "\n",
     "canvas = Canvas(size=size)\n",
+    "canvas.scale(2)\n",
+    "\n",
     "for i in range(10):\n",
     "    width = 1 + i\n",
     "    x = 5 + i * 20\n",
@@ -54,13 +56,15 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "size = (160, 180)\n",
+    "size = (320, 360)\n",
     "\n",
     "canvas = Canvas(size=size)\n",
     "\n",
     "# Possible line_cap values\n",
     "line_caps = ['butt', 'round', 'square']\n",
     "\n",
+    "canvas.scale(2)\n",
+    "\n",
     "# Draw guides\n",
     "canvas.stroke_style = '#09f'\n",
     "canvas.begin_path()\n",
@@ -73,6 +77,7 @@
     "# Draw lines\n",
     "canvas.stroke_style = 'black'\n",
     "canvas.font = '15px serif'\n",
+    "\n",
     "for i in range(len(line_caps)):\n",
     "    line_cap = line_caps[i]\n",
     "    x = 25 + i * 50\n",
@@ -87,6 +92,54 @@
     "\n",
     "canvas"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Line join\n",
+    "### Sets the appearance of the \"corners\" where lines meet."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "size = (320, 360)\n",
+    "\n",
+    "canvas = Canvas(size=size)\n",
+    "\n",
+    "# Possible line_join values\n",
+    "line_joins = ['round', 'bevel', 'miter']\n",
+    "\n",
+    "min_y = 40\n",
+    "max_y = 80\n",
+    "spacing = 45\n",
+    "\n",
+    "canvas.line_width = 10\n",
+    "canvas.scale(2)\n",
+    "for i in range(len(line_joins)):\n",
+    "    line_join = line_joins[i]\n",
+    "    \n",
+    "    y1 = min_y + i * spacing\n",
+    "    y2 = max_y + i * spacing\n",
+    "\n",
+    "    canvas.line_join = line_join\n",
+    "\n",
+    "    canvas.fill_text(line_join, 60, y1 - 10)\n",
+    "\n",
+    "    canvas.begin_path()\n",
+    "    canvas.move_to(-5, y1)\n",
+    "    canvas.line_to(35, y2)\n",
+    "    canvas.line_to(75, y1)\n",
+    "    canvas.line_to(115, y2)\n",
+    "    canvas.line_to(155, y1)\n",
+    "    canvas.stroke()\n",
+    "\n",
+    "canvas"
+   ]
   }
  ],
  "metadata": {

ipycanvas/canvas.py

@@ -77,9 +77,14 @@ class Canvas(DOMWidget):
     #: (float) Sets the width of lines drawn in the future, must be a positive number. Default to ``1.0``.
     line_width = Float(1.0)
 
-    #: (str) Sets the appearance of the ends of lines.
+    #: (str) Sets the appearance of the ends of lines, possible values are ``'butt'``, ``'round'`` and ``'square'``.
+    #: Default to ``'butt'``.
     line_cap = Enum(['butt', 'round', 'square'], default_value='butt')
 
+    #: (str) Sets the appearance of the "corners" where lines meet, possible values are ``'round'``, ``'bevel'`` and ``'miter'``.
+    #: Default to ``'miter'``
+    line_join = Enum(['round', 'bevel', 'miter'], default_value='miter')
+
     def __init__(self, *args, **kwargs):
         """Create a Canvas widget."""
         #: Whether commands should be cached or not
@@ -275,7 +280,7 @@ def flush(self):
 
     @observe('fill_style', 'stroke_style', 'global_alpha', 'font', 'text_align',
              'text_baseline', 'direction', 'global_composite_operation',
-             'line_width', 'line_cap')
+             'line_width', 'line_cap', 'line_join')
     def _on_set_attr(self, change):
         command = {
             'name': 'set',