Stop leaking fonts (and fillStyle) to ctx (#7150)

diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js
index 314311a216390361a586134b7a150f5c0fe2b637..4f4c4443721ebf06509ad1a935da73c8a1c99f77 100644 (file)
--- 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 9f4ce932a6760ede2cdc6232f43df87cbffab6a0..3c83a1a1b99fe2eb91b55027b2a82bbd1aa239e7 100644 (file)
--- 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 8766cad414604ee6ee454b890e77acf388fa343d..b92b7967152f97790d671061df8ca516989ceea1 100644 (file)
--- 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 3a5854f0f201d16ef2d9fa93bb8f985932677b5d..d258a2fababb9f11d0411072c445924dc2cfe3da 100644 (file)
--- 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 484411356a65dfd94605b2952073f959ddc985b1..b2f8041671505b184e972b8cccb9883baa67a62a 100644 (file)
--- 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]