Chart.js: [BUG] Unable to parse color from object when using patterns (patternomaly.js)

[Irexistus]

Expected Behavior

For the hover tooltip to show without throwing any errors when using a pattern as a background color with the help of patternomaly.js as suggested in the documentation at http://www.chartjs.org/docs/#chart-configuration-patterns

Current Behavior

Currently the tooltip fails to properly show and sort of soft-locks in place and the following error is presented in the console:

Uncaught Error: Unable to parse color from object {"shapeType":"dash"}

Possible Solution

It looks like a helper function to correct for the issue was a suggestion in https://github.com/chartjs/Chart.js/issues/1323 but I'm unsure if it's a possible solution here.

Steps to Reproduce (for bugs)

1. Set the background color for a dataset to a pattern.
2. Try to hover over a point to show the tooltip

Example: http://codepen.io/anon/pen/ZKmVgo

Context

I'm trying to make use of patterns on my charts to aid colorblind individuals.

Environment

• Chart.js version: 2.5
• Browser name and version: Chrome 58.0.3029.110 (64-bit)
• Link to your project: http://codepen.io/anon/pen/ZKmVgo

[dotjsNet]

You linked the JS using
https://irexistus.com/patternomaly.js
but its getting insecure call http://irexistus.com/patternomaly.js

[Irexistus]

Changed the snippet to use just http, http://codepen.io/anon/pen/ZKmVgo

[swierczek]

I fixed this in a local version of Chart.js (drawBody method): https://github.com/ashiguruma/patternomaly/issues/10

var bgColor = vm.labelColors[i].backgroundColor;
if (bgColor instanceof CanvasPattern) {
    //set the fillStyle to the pattern
    ctx.fillStyle = vm.labelColors[i].backgroundColor;
} else {
    // Inner square
    ctx.fillStyle = mergeOpacity(bgColor, opacity);
}

ctx.fillRect(pt.x + 1, pt.y + 1, bodyFontSize - 2, bodyFontSize - 2);
ctx.fillStyle = textColor;

This could easily be added to the core to fix the issue.

[sanbiv]

I use this simple workaround (with pattornamaly & chart.js 2.5)

const getPattern = (shape, color)=> {
  let rgb = Chart.helpers.colors(color)
  let bgPattern = pattern.draw(shape, color)
  return Chart.helpers.extend(bgPattern, {r: rgb.red(), g: rgb.green(), b: rgb.blue(), alpha: rgb.alpha()})
}

// in my chart options
// ...code omitted.....
const backgroundColor = getPattern("dot", "red");
let chart = new Chart(ctx, {
    data: {
        labels: ['Item 1', 'Item 2', 'Item 3'],
        datasets: [{
            data: [10, 20, 30],
            backgroundColor
        }]
    }
})