Properly merge colors for the label colors in the tooltip. I added a private helper...

diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js
index 54f9f49f5f777e44a061c17e06341c17daa25b0d..8a0afe3dce0bf7a1e77e6d46fe172825b6eda946 100755 (executable)
--- a/src/core/core.tooltip.js
+++ b/src/core/core.tooltip.js
@@ -4,6 +4,14 @@ module.exports = function(Chart) {
 
        var helpers = Chart.helpers;
 
+       /**
+        * Helper method to merge the opacity into a color
+        */
+       function mergeOpacity(colorString, opacity) {
+               var color = helpers.color(colorString);
+               return color.alpha(opacity * color.alpha()).rgbaString();
+       }
+
        Chart.defaults.global.tooltips = {
                enabled: true,
                custom: null,
@@ -556,8 +564,7 @@ module.exports = function(Chart) {
                                }
                        }
 
-                       var bgColor = helpers.color(vm.backgroundColor);
-                       ctx.fillStyle = bgColor.alpha(opacity * bgColor.alpha()).rgbString();
+                       ctx.fillStyle = mergeOpacity(vm.backgroundColor, opacity);
                        ctx.beginPath();
                        ctx.moveTo(x1, y1);
                        ctx.lineTo(x2, y2);
@@ -575,8 +582,7 @@ module.exports = function(Chart) {
                                var titleFontSize = vm.titleFontSize,
                                        titleSpacing = vm.titleSpacing;
 
-                               var titleFontColor = helpers.color(vm.titleFontColor);
-                               ctx.fillStyle = titleFontColor.alpha(opacity * titleFontColor.alpha()).rgbString();
+                               ctx.fillStyle = mergeOpacity(vm.titleFontColor, opacity);
                                ctx.font = helpers.fontString(titleFontSize, vm._titleFontStyle, vm._titleFontFamily);
 
                                var i, len;
@@ -598,8 +604,7 @@ module.exports = function(Chart) {
                        ctx.textAlign = vm._bodyAlign;
                        ctx.textBaseline = 'top';
 
-                       var bodyFontColor = helpers.color(vm.bodyFontColor);
-                       var textColor = bodyFontColor.alpha(opacity * bodyFontColor.alpha()).rgbString();
+                       var textColor = mergeOpacity(vm.bodyFontColor, opacity);
                        ctx.fillStyle = textColor;
                        ctx.font = helpers.fontString(bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);
 
@@ -624,15 +629,15 @@ module.exports = function(Chart) {
                                        // Draw Legend-like boxes if needed
                                        if (drawColorBoxes) {
                                                // Fill a white rect so that colours merge nicely if the opacity is < 1
-                                               ctx.fillStyle = helpers.color(vm.legendColorBackground).alpha(opacity).rgbaString();
+                                               ctx.fillStyle = mergeOpacity(vm.legendColorBackground, opacity);
                                                ctx.fillRect(pt.x, pt.y, bodyFontSize, bodyFontSize);
 
                                                // Border
-                                               ctx.strokeStyle = helpers.color(vm.labelColors[i].borderColor).alpha(opacity).rgbaString();
+                                               ctx.strokeStyle = mergeOpacity(vm.labelColors[i].borderColor, opacity);
                                                ctx.strokeRect(pt.x, pt.y, bodyFontSize, bodyFontSize);
 
                                                // Inner square
-                                               ctx.fillStyle = helpers.color(vm.labelColors[i].backgroundColor).alpha(opacity).rgbaString();
+                                               ctx.fillStyle = mergeOpacity(vm.labelColors[i].backgroundColor, opacity);
                                                ctx.fillRect(pt.x + 1, pt.y + 1, bodyFontSize - 2, bodyFontSize - 2);
 
                                                ctx.fillStyle = textColor;
@@ -660,8 +665,7 @@ module.exports = function(Chart) {
                                ctx.textAlign = vm._footerAlign;
                                ctx.textBaseline = 'top';
 
-                               var footerFontColor = helpers.color(vm.footerFontColor);
-                               ctx.fillStyle = footerFontColor.alpha(opacity * footerFontColor.alpha()).rgbString();
+                               ctx.fillStyle = mergeOpacity(vm.footerFontColor, opacity);
                                ctx.font = helpers.fontString(vm.footerFontSize, vm._footerFontStyle, vm._footerFontFamily);
 
                                helpers.each(footer, function(line) {
@@ -671,8 +675,7 @@ module.exports = function(Chart) {
                        }
                },
                drawBackground: function(pt, vm, ctx, tooltipSize, opacity) {
-                       var bgColor = helpers.color(vm.backgroundColor);
-                       ctx.fillStyle = bgColor.alpha(opacity * bgColor.alpha()).rgbString();
+                       ctx.fillStyle = mergeOpacity(vm.backgroundColor, opacity);
                        helpers.drawRoundedRectangle(ctx, pt.x, pt.y, tooltipSize.width, tooltipSize.height, vm.cornerRadius);
                        ctx.fill();
                },