From a9ae64f1e2a926cc3016e63e9b6316f26d7ff6ec Mon Sep 17 00:00:00 2001
From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Sun, 23 Feb 2020 20:08:01 +0200
Subject: [PATCH] Stop leaking fonts (and fillStyle) to ctx (#7150)

---
 src/helpers/helpers.canvas.js      |  4 ++++
 src/plugins/plugin.title.js        |  7 ++++---
 src/plugins/plugin.tooltip.js      |  4 ++++
 test/specs/helpers.canvas.tests.js | 12 ++++++++++++
 test/specs/plugin.title.tests.js   | 18 +++++++++---------
 5 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js
index 314311a21..4f4c44437 100644
--- a/src/helpers/helpers.canvas.js
+++ b/src/helpers/helpers.canvas.js
@@ -44,6 +44,8 @@ export function _longestText(ctx, font, arrayOfThings, cache) {
 		cache.font = font;
 	}
 
+	ctx.save();
+
 	ctx.font = font;
 	let longest = 0;
 	const ilen = arrayOfThings.length;
@@ -67,6 +69,8 @@ export function _longestText(ctx, font, arrayOfThings, cache) {
 		}
 	}
 
+	ctx.restore();
+
 	const gcLen = gc.length / 2;
 	if (gcLen > arrayOfThings.length) {
 		for (i = 0; i < gcLen; i++) {
diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js
index 9f4ce932a..3c83a1a1b 100644
--- a/src/plugins/plugin.title.js
+++ b/src/plugins/plugin.title.js
@@ -152,9 +152,6 @@ export class Title extends Element {
 		let maxWidth, titleX, titleY;
 		let align;
 
-		ctx.fillStyle = helpers.valueOrDefault(opts.fontColor, defaults.fontColor); // render in correct colour
-		ctx.font = fontOpts.string;
-
 		// Horizontal
 		if (me.isHorizontal()) {
 			switch (opts.align) {
@@ -196,6 +193,10 @@ export class Title extends Element {
 		}
 
 		ctx.save();
+
+		ctx.fillStyle = helpers.valueOrDefault(opts.fontColor, defaults.fontColor); // render in correct colour
+		ctx.font = fontOpts.string;
+
 		ctx.translate(titleX, titleY);
 		ctx.rotate(rotation);
 		ctx.textAlign = align;
diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
index 8766cad41..b92b79671 100644
--- a/src/plugins/plugin.tooltip.js
+++ b/src/plugins/plugin.tooltip.js
@@ -291,6 +291,8 @@ function getTooltipSize(tooltip) {
 		width = Math.max(width, ctx.measureText(line).width + widthPadding);
 	};
 
+	ctx.save();
+
 	ctx.font = helpers.fontString(titleFontSize, options.titleFontStyle, options.titleFontFamily);
 	helpers.each(tooltip.title, maxLineWidth);
 
@@ -313,6 +315,8 @@ function getTooltipSize(tooltip) {
 	ctx.font = helpers.fontString(footerFontSize, options.footerFontStyle, options.footerFontFamily);
 	helpers.each(tooltip.footer, maxLineWidth);
 
+	ctx.restore();
+
 	// Add padding
 	width += 2 * options.xPadding;
 
diff --git a/test/specs/helpers.canvas.tests.js b/test/specs/helpers.canvas.tests.js
index 3a5854f0f..d258a2fab 100644
--- a/test/specs/helpers.canvas.tests.js
+++ b/test/specs/helpers.canvas.tests.js
@@ -49,11 +49,20 @@ describe('Chart.helpers.canvas', function() {
 		expect(helpers.canvas._longestText(context, font, arrayOfThings2D, {})).toEqual(80);
 		// We check to make sure we made the right calls to the canvas.
 		expect(context.getCalls()).toEqual([{
+			name: 'save',
+			args: []
+		}, {
 			name: 'measureText',
 			args: ['FooBar']
 		}, {
 			name: 'measureText',
 			args: ['Bar']
+		}, {
+			name: 'restore',
+			args: []
+		}, {
+			name: 'save',
+			args: []
 		}, {
 			name: 'measureText',
 			args: ['FooBar_1']
@@ -63,6 +72,9 @@ describe('Chart.helpers.canvas', function() {
 		}, {
 			name: 'measureText',
 			args: ['Foo_1']
+		}, {
+			name: 'restore',
+			args: []
 		}]);
 	});
 
diff --git a/test/specs/plugin.title.tests.js b/test/specs/plugin.title.tests.js
index 484411356..b2f804167 100644
--- a/test/specs/plugin.title.tests.js
+++ b/test/specs/plugin.title.tests.js
@@ -116,11 +116,11 @@ describe('Title block tests', function() {
 		title.draw();
 
 		expect(context.getCalls()).toEqual([{
-			name: 'setFillStyle',
-			args: ['#666']
-		}, {
 			name: 'save',
 			args: []
+		}, {
+			name: 'setFillStyle',
+			args: ['#666']
 		}, {
 			name: 'translate',
 			args: [300, 67.2]
@@ -169,11 +169,11 @@ describe('Title block tests', function() {
 		title.draw();
 
 		expect(context.getCalls()).toEqual([{
-			name: 'setFillStyle',
-			args: ['#666']
-		}, {
 			name: 'save',
 			args: []
+		}, {
+			name: 'setFillStyle',
+			args: ['#666']
 		}, {
 			name: 'translate',
 			args: [117.2, 250]
@@ -205,11 +205,11 @@ describe('Title block tests', function() {
 		title.draw();
 
 		expect(context.getCalls()).toEqual([{
-			name: 'setFillStyle',
-			args: ['#666']
-		}, {
 			name: 'save',
 			args: []
+		}, {
+			name: 'setFillStyle',
+			args: ['#666']
 		}, {
 			name: 'translate',
 			args: [117.2, 250]
-- 
2.47.2