Clip out the chart area so that things outside do not draw

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index fb635453f77436b7f81478690c2d9110e47b740b..64af936deab39c1bdaaed869b10e7fd3e11c6eb1 100644 (file)
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -310,6 +310,12 @@ module.exports = function(Chart) {
                                this.scale.draw();
                        }
 
+                       // Clip out the chart area so that anything outside does not draw. This is necessary for zoom and pan to function
+                       this.chart.ctx.save();
+                       this.chart.ctx.beginPath();
+                       this.chart.ctx.rect(this.chartArea.left, this.chartArea.top, this.chartArea.right - this.chartArea.left, this.chartArea.bottom - this.chartArea.top);
+                       this.chart.ctx.clip();
+
                        // Draw each dataset via its respective controller (reversed to support proper line stacking)
                        helpers.each(this.data.datasets, function(dataset, datasetIndex) {
                                if (helpers.isDatasetVisible(dataset)) {
@@ -317,6 +323,9 @@ module.exports = function(Chart) {
                                }
                        }, null, true);
 
+                       // Restore from the clipping operation
+                       this.chart.ctx.restore();
+
                        // Finally draw the tooltip
                        this.tooltip.transition(easingDecimal).draw();
                },