From 87b1806358e2bdc7e04b671d8232db0417b87b15 Mon Sep 17 00:00:00 2001
From: Toshiki Saito <saito@koyo-se.net>
Date: Wed, 30 Nov 2016 15:45:08 +0800
Subject: [PATCH 1/2] Implement clipping

---
 src/controllers/controller.bar.js  |  2 ++
 src/controllers/controller.line.js |  5 ++++-
 src/core/core.canvasHelpers.js     | 12 ++++++++++++
 src/elements/element.point.js      | 29 ++++++++++++++++++++++++++++-
 4 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js
index e9a85aabd22..144660d0ad8 100644
--- a/src/controllers/controller.bar.js
+++ b/src/controllers/controller.bar.js
@@ -241,12 +241,14 @@ module.exports = function(Chart) {
 			var dataset = me.getDataset();
 			var i, len;
 
+			Chart.canvasHelpers.clipArea(me.chart.chart.ctx, me.chart.chartArea);
 			for (i = 0, len = metaData.length; i < len; ++i) {
 				var d = dataset.data[i];
 				if (d !== null && d !== undefined && !isNaN(d)) {
 					metaData[i].transition(easingDecimal).draw();
 				}
 			}
+			Chart.canvasHelpers.unclipArea(me.chart.chart.ctx);
 		},
 
 		setHoverStyle: function(rectangle) {
diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index 23d4eedc402..8d78fe59bfd 100644
--- a/src/controllers/controller.line.js
+++ b/src/controllers/controller.line.js
@@ -286,20 +286,23 @@ module.exports = function(Chart) {
 			var points = meta.data || [];
 			var easingDecimal = ease || 1;
 			var i, ilen;
+			var chartArea = me.chart.chartArea;
 
 			// Transition Point Locations
 			for (i=0, ilen=points.length; i<ilen; ++i) {
 				points[i].transition(easingDecimal);
 			}
 
+			Chart.canvasHelpers.clipArea(me.chart.chart.ctx, me.chart.chartArea);
 			// Transition and Draw the line
 			if (lineEnabled(me.getDataset(), me.chart.options)) {
 				meta.dataset.transition(easingDecimal).draw();
 			}
+			Chart.canvasHelpers.unclipArea(me.chart.chart.ctx);
 
 			// Draw the points
 			for (i=0, ilen=points.length; i<ilen; ++i) {
-				points[i].draw();
+				points[i].draw(chartArea);
 			}
 		},
 
diff --git a/src/core/core.canvasHelpers.js b/src/core/core.canvasHelpers.js
index 42fac5c00b5..553730c7373 100644
--- a/src/core/core.canvasHelpers.js
+++ b/src/core/core.canvasHelpers.js
@@ -109,4 +109,16 @@ module.exports = function(Chart) {
 
 		ctx.stroke();
 	};
+
+	helpers.clipArea = function(ctx, clipArea) {
+		ctx.save();
+		ctx.beginPath();
+		ctx.rect(clipArea.left, clipArea.top, clipArea.right - clipArea.left, clipArea.bottom - clipArea.top);
+		ctx.clip();
+	};
+
+	helpers.unclipArea = function(ctx) {
+		ctx.restore();
+	};
+
 };
diff --git a/src/elements/element.point.js b/src/elements/element.point.js
index fe3a6696bd1..d358eb344c8 100644
--- a/src/elements/element.point.js
+++ b/src/elements/element.point.js
@@ -56,13 +56,14 @@ module.exports = function(Chart) {
 				padding: vm.radius + vm.borderWidth
 			};
 		},
-		draw: function() {
+		draw: function(chartArea) {
 			var vm = this._view;
 			var ctx = this._chart.ctx;
 			var pointStyle = vm.pointStyle;
 			var radius = vm.radius;
 			var x = vm.x;
 			var y = vm.y;
+			var color = Chart.helpers.color;
 
 			if (vm.skip) {
 				return;
@@ -72,6 +73,32 @@ module.exports = function(Chart) {
 			ctx.lineWidth = helpers.getValueOrDefault(vm.borderWidth, globalOpts.elements.point.borderWidth);
 			ctx.fillStyle = vm.backgroundColor || defaultColor;
 
+			// Cliping for Points.
+			var isOutofChartArea = function(position, area, errMarginPercent) {
+				if ((position.x < area.left) || (area.right*errMarginPercent < position.x) || (position.y < area.top) || (area.bottom*errMarginPercent < position.y)) {
+					return true;
+				}
+				return false;
+			};
+			var errMarginPercent = 1.01; // 1.01 is margin for Accumulated error. (Especially Edge, IE.)
+			var ratio = 0;
+			// going out from inner charArea?
+			if ((chartArea !== undefined)&&(isOutofChartArea(this._view, chartArea, errMarginPercent))&&(isOutofChartArea(this._model, chartArea, errMarginPercent))) {
+				// Point fade out
+				if (this._model.x < chartArea.left) {
+					ratio = (x - this._model.x) / (chartArea.left - this._model.x);
+				} else if (chartArea.right*errMarginPercent < this._model.x) {
+					ratio = (this._model.x - x) / (this._model.x - chartArea.right);
+				} else if (this._model.y < chartArea.top) {
+					ratio = (y - this._model.y) / (chartArea.top - this._model.y);
+				} else if (chartArea.bottom*errMarginPercent < this._model.y) {
+					ratio = (this._model.y - y) / (this._model.y - chartArea.bottom);
+				}
+				ratio = Math.round(ratio*100)/100;
+				ctx.strokeStyle = color(ctx.strokeStyle).alpha(ratio).rgbString();
+				ctx.fillStyle = color(ctx.fillStyle).alpha(ratio).rgbString();
+			}
+
 			Chart.canvasHelpers.drawPoint(ctx, pointStyle, radius, x, y);
 		}
 	});

From f3fda31d8753460ed89373c7e4e4404610b787b2 Mon Sep 17 00:00:00 2001
From: Toshiki Saito <saito@koyo-se.net>
Date: Thu, 1 Dec 2016 10:01:35 +0800
Subject: [PATCH 2/2] Implement clipping. revision-1

---
 src/controllers/controller.line.js |  3 +--
 src/elements/element.point.js      | 31 +++++++++++++-----------------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js
index 8d78fe59bfd..806ab4f3f58 100644
--- a/src/controllers/controller.line.js
+++ b/src/controllers/controller.line.js
@@ -286,7 +286,6 @@ module.exports = function(Chart) {
 			var points = meta.data || [];
 			var easingDecimal = ease || 1;
 			var i, ilen;
-			var chartArea = me.chart.chartArea;
 
 			// Transition Point Locations
 			for (i=0, ilen=points.length; i<ilen; ++i) {
@@ -302,7 +301,7 @@ module.exports = function(Chart) {
 
 			// Draw the points
 			for (i=0, ilen=points.length; i<ilen; ++i) {
-				points[i].draw(chartArea);
+				points[i].draw(me.chart.chartArea);
 			}
 		},
 
diff --git a/src/elements/element.point.js b/src/elements/element.point.js
index d358eb344c8..c68edc7861b 100644
--- a/src/elements/element.point.js
+++ b/src/elements/element.point.js
@@ -58,12 +58,15 @@ module.exports = function(Chart) {
 		},
 		draw: function(chartArea) {
 			var vm = this._view;
+			var model = this._model;
 			var ctx = this._chart.ctx;
 			var pointStyle = vm.pointStyle;
 			var radius = vm.radius;
 			var x = vm.x;
 			var y = vm.y;
 			var color = Chart.helpers.color;
+			var errMargin = 1.01; // 1.01 is margin for Accumulated error. (Especially Edge, IE.)
+			var ratio = 0;
 
 			if (vm.skip) {
 				return;
@@ -74,27 +77,19 @@ module.exports = function(Chart) {
 			ctx.fillStyle = vm.backgroundColor || defaultColor;
 
 			// Cliping for Points.
-			var isOutofChartArea = function(position, area, errMarginPercent) {
-				if ((position.x < area.left) || (area.right*errMarginPercent < position.x) || (position.y < area.top) || (area.bottom*errMarginPercent < position.y)) {
-					return true;
-				}
-				return false;
-			};
-			var errMarginPercent = 1.01; // 1.01 is margin for Accumulated error. (Especially Edge, IE.)
-			var ratio = 0;
 			// going out from inner charArea?
-			if ((chartArea !== undefined)&&(isOutofChartArea(this._view, chartArea, errMarginPercent))&&(isOutofChartArea(this._model, chartArea, errMarginPercent))) {
+			if ((chartArea !== undefined) && ((model.x < chartArea.left) || (chartArea.right*errMargin < model.x) || (model.y < chartArea.top) || (chartArea.bottom*errMargin < model.y))) {
 				// Point fade out
-				if (this._model.x < chartArea.left) {
-					ratio = (x - this._model.x) / (chartArea.left - this._model.x);
-				} else if (chartArea.right*errMarginPercent < this._model.x) {
-					ratio = (this._model.x - x) / (this._model.x - chartArea.right);
-				} else if (this._model.y < chartArea.top) {
-					ratio = (y - this._model.y) / (chartArea.top - this._model.y);
-				} else if (chartArea.bottom*errMarginPercent < this._model.y) {
-					ratio = (this._model.y - y) / (this._model.y - chartArea.bottom);
+				if (model.x < chartArea.left) {
+					ratio = (x - model.x) / (chartArea.left - model.x);
+				} else if (chartArea.right*errMargin < model.x) {
+					ratio = (model.x - x) / (model.x - chartArea.right);
+				} else if (model.y < chartArea.top) {
+					ratio = (y - model.y) / (chartArea.top - model.y);
+				} else if (chartArea.bottom*errMargin < model.y) {
+					ratio = (model.y - y) / (model.y - chartArea.bottom);
 				}
-				ratio = Math.round(ratio*100)/100;
+				ratio = Math.round(ratio*100) / 100;
 				ctx.strokeStyle = color(ctx.strokeStyle).alpha(ratio).rgbString();
 				ctx.fillStyle = color(ctx.fillStyle).alpha(ratio).rgbString();
 			}