Add borderJoinStyle option for arc elements

src/elements/element.arc.js

@@ -221,18 +221,19 @@ function drawFullCircleBorders(ctx, element, inner) {
 
 function drawBorder(ctx, element, offset, spacing, endAngle) {
   const {options} = element;
+  const {borderWidth, borderJoinStyle} = options;
   const inner = options.borderAlign === 'inner';
 
-  if (!options.borderWidth) {
+  if (!borderWidth) {
     return;
   }
 
   if (inner) {
-    ctx.lineWidth = options.borderWidth * 2;
-    ctx.lineJoin = 'round';
+    ctx.lineWidth = borderWidth * 2;
+    ctx.lineJoin = borderJoinStyle || 'round';
   } else {
-    ctx.lineWidth = options.borderWidth;
-    ctx.lineJoin = 'bevel';
+    ctx.lineWidth = borderWidth;
+    ctx.lineJoin = borderJoinStyle || 'bevel';
   }
 
   if (element.fullCircles) {
@@ -359,6 +360,7 @@ ArcElement.id = 'arc';
 ArcElement.defaults = {
   borderAlign: 'center',
   borderColor: '#fff',
+  borderJoinStyle: undefined,
   borderRadius: 0,
   borderWidth: 2,
   offset: 0,

test/fixtures/controller.doughnut/borderJoinStyle/bevel-default.js

@@ -0,0 +1,25 @@
+module.exports = {
+  config: {
+    type: 'doughnut',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5],
+      datasets: [
+        {
+          data: [0, 2, 4, null, 6, 8],
+          backgroundColor: 'transparent',
+          borderColor: '#000',
+          borderWidth: 10,
+          spacing: 50,
+        },
+      ]
+    },
+    options: {
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

test/fixtures/controller.doughnut/borderJoinStyle/miter.js

@@ -0,0 +1,26 @@
+module.exports = {
+  config: {
+    type: 'doughnut',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5],
+      datasets: [
+        {
+          data: [0, 2, 4, null, 6, 8],
+          backgroundColor: 'transparent',
+          borderColor: '#000',
+          borderJoinStyle: 'miter',
+          borderWidth: 10,
+          spacing: 50,
+        },
+      ]
+    },
+    options: {
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

test/fixtures/controller.doughnut/borderJoinStyle/round.js

@@ -0,0 +1,26 @@
+module.exports = {
+  config: {
+    type: 'doughnut',
+    data: {
+      labels: [0, 1, 2, 3, 4, 5],
+      datasets: [
+        {
+          data: [0, 2, 4, null, 6, 8],
+          backgroundColor: 'transparent',
+          borderColor: '#000',
+          borderJoinStyle: 'round',
+          borderWidth: 10,
+          spacing: 50,
+        },
+      ]
+    },
+    options: {
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};