Fix: Don't use clip/unclipArea when clip: false (#9286)

src/controllers/controller.bar.js

@@ -1,6 +1,6 @@
 import DatasetController from '../core/core.datasetController';
 import {
-  clipArea, unclipArea, _arrayUnique, isArray, isNullOrUndef,
+  _arrayUnique, isArray, isNullOrUndef,
   valueOrDefault, resolveObjectKey, sign, defined
 } from '../helpers';
 
@@ -224,6 +224,14 @@ export default class BarController extends DatasetController {
     }
   }
 
+  /**
+	 * @return {number|boolean}
+	 * @protected
+	 */
+  getMaxOverflow() {
+    return 0;
+  }
+
   /**
 	 * @protected
 	 */
@@ -514,22 +522,17 @@ export default class BarController extends DatasetController {
 
   draw() {
     const me = this;
-    const chart = me.chart;
     const meta = me._cachedMeta;
     const vScale = meta.vScale;
     const rects = meta.data;
     const ilen = rects.length;
     let i = 0;
 
-    clipArea(chart.ctx, chart.chartArea);
-
     for (; i < ilen; ++i) {
       if (me.getParsed(i)[vScale.axis] !== null) {
         rects[i].draw(me._ctx);
       }
     }
-
-    unclipArea(chart.ctx);
   }
 
 }

src/core/core.controller.js

@@ -706,6 +706,7 @@ class Chart {
     const me = this;
     const ctx = me.ctx;
     const clip = meta._clip;
+    const useClip = !clip.disabled;
     const area = me.chartArea;
     const args = {
       meta,
@@ -717,16 +718,20 @@ class Chart {
       return;
     }
 
-    clipArea(ctx, {
-      left: clip.left === false ? 0 : area.left - clip.left,
-      right: clip.right === false ? me.width : area.right + clip.right,
-      top: clip.top === false ? 0 : area.top - clip.top,
-      bottom: clip.bottom === false ? me.height : area.bottom + clip.bottom
-    });
+    if (useClip) {
+      clipArea(ctx, {
+        left: clip.left === false ? 0 : area.left - clip.left,
+        right: clip.right === false ? me.width : area.right + clip.right,
+        top: clip.top === false ? 0 : area.top - clip.top,
+        bottom: clip.bottom === false ? me.height : area.bottom + clip.bottom
+      });
+    }
 
     meta.controller.draw();
 
-    unclipArea(ctx);
+    if (useClip) {
+      unclipArea(ctx);
+    }
 
     args.cancelable = false;
     me.notifyPlugins('afterDatasetDraw', args);

src/core/core.datasetController.js

@@ -51,7 +51,8 @@ function toClip(value) {
     top: t,
     right: r,
     bottom: b,
-    left: l
+    left: l,
+    disabled: value === false
   };
 }
 

test/specs/controller.bar.tests.js

@@ -1628,4 +1628,31 @@ describe('Chart.controllers.bar', function() {
       expect(chart.scales.y.getMinMax()).toEqual({min: -10, max: 10});
     });
   });
+
+  describe('clip', function() {
+    it('Should not use ctx.clip when clip=false', function() {
+      var ctx = window.createMockContext();
+      ctx.resetTransform = function() {};
+
+      var chart = window.acquireChart({
+        type: 'bar',
+        data: {
+          labels: ['a', 'b', 'c'],
+          datasets: [{
+            data: [1, 2, 3],
+            clip: false
+          }]
+        }
+      });
+      var orig = chart.ctx;
+
+      // Draw on mock context
+      chart.ctx = ctx;
+      chart.draw();
+
+      chart.ctx = orig;
+
+      expect(ctx.getCalls().filter(x => x.name === 'clip').length).toEqual(0);
+    });
+  });
 });