Background image not working on polar chart

[rajan77]

Hello...
fantastic plugin. Bevels and shadows are so cool!

I am trying to get image working but keep getting an error on:
TypeError: Argument 1 of CanvasRenderingContext2D.createPattern could not be converted to any of: HTMLImageElement, SVGImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.

contains tags for Chart.min.js and chartjs-plugin-style.min.js

...

...

var my_data;
my_data = ['', '', '', '', '', '', '', ''];
var backgroundColor = 'white';
var img = new Image();
img = 'myimg.png';
var ctx = document.getElementById('birdsChart').getContext('2d');

                    birdsCanvas = document.getElementById("birdsChart");

                    Chart.defaults.global.defaultFontFamily = "Lato";
                    Chart.defaults.global.defaultFontSize = 18;

                    var birdsData = {
                      labels: ["field1", "field2, "..."],
                      datasets: [{
                        data: my_data,
  bevelWidth: 1,
  bevelHighlightColor: 'rgba(255, 255, 255, 0.75)',
  shadowOffsetX: 1,

  shadowOffsetY: 1,

  shadowBlur: 10,

  shadowColor: 'rgba(0, 0, 0, 0.5)',
  hoverInnerGlowWidth: 20,

        backgroundOverlayColor: ctx.createPattern(img, 'repeat'),
        backgroundOverlayMode: 'multiply',
  hoverOuterGlowWidth: 20,

  hoverOuterGlowWidth: 'rgb(255, 255, 0)'
                                        }],
                        backgroundColor: [
                          "#e02d29",
                          "#ee9128",
                          "#f6ec30",
                          "#1c9e50",
                          "#2e3386",
                          "#8a2a86",
                          "#ff0000",
                          "#000000",
                        ],                          
                    };

                    var chartOptions = {
                      startAngle: -Math.PI / 4,
                      legend: {
                        position: 'top'
                      },
                      tooltip: {
                        enabled: 'true'
                      },
tooplips: {

  bevelWidth: 1,

  bevelHighlightColor: 'rgba(255, 255, 255, 0.75)',

  bevelShadowColor: 'rgba(0, 0, 0, 0.5)',

      shadowOffsetX: 1,

  shadowOffsetY: 1,

  shadowBlur: 10,

  shadowColor: 'rgba(0, 0, 0, 0.5)'
},
                          scale: {
                          ticks: {
                              min: 0,
                              max: 10,
                              stepSize: 1
                          }
                      },
                      animation: {
                        animateRotate: false
                      },
                      maintainAspectRatio: false,
                       responsive: true,

    title: {
        display: true,
        text: 'My Polar Chart',
        fontSize: 21,
        fontColor: '#0000ff',
    }
                            };















                    img.onload = function() {
                        var polarAreaChart = new Chart(ctx, {
                        type: 'polarArea',
                        data: birdsData,
                        options: chartOptions
                      });
                    };

                        
                        </script>

[rajan77]

I got it working using the example... Is it possible to have a transparent image on top of whatever colors I set?

In the following example, all labels have blocks as the bG image. I would like to keep some colors for each label and supplement it with a transparent image. is that possible?

Thanks

        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>

---

Testing...

          <div style="width:580px; margin:auto;">
          <canvas id="chart5"></canvas>
        </div>

<script> var img = new Image(); img.src = '/free_coaching_tools/blocks.png'; img.onload = function() { var ctx5 = document.getElementById('chart5').getContext('2d'); var chart5 = new Chart(ctx5, { type: 'polarArea', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June'], datasets: [{ data: [45, 20, 64, 32, 76, 51], borderWidth: 0, backgroundColor: 'rgb(255, 99, 132)', shadowOffsetX: 3, shadowOffsetY: 3, shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)', bevelWidth: 3, bevelHighlightColor: 'rgba(255, 255, 255, 0.75)', bevelShadowColor: 'rgba(0, 0, 0, 0.5)', hoverInnerGlowWidth: 20, hoverInnerGlowColor: 'rgb(255, 255, 0)', hoverOuterGlowWidth: 20, hoverOuterGlowColor: 'rgb(255, 255, 0)', backgroundOverlayColor: ctx5.createPattern(img, 'repeat'), backgroundOverlayMode: 'multiply' }] }, options: { tooltips: { shadowOffsetX: 3, shadowOffsetY: 3, shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)', bevelWidth: 3, bevelHighlightColor: 'rgba(255, 255, 255, 0.75)', bevelShadowColor: 'rgba(0, 0, 0, 0.5)' } } }); }; </script>