From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Sun, 3 Apr 2016 01:41:57 +0000 (-0400)
Subject: Clip out the chart area so that things outside do not draw
X-Git-Tag: v2.0.0~3^2~3
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=95bd0a54dd2f4e3a0ec5601b2a359ec72408d48a;p=thirdparty%2FChart.js.git

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 fb635453f..64af936de 100644
--- 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();
 		},