Chart.js의 toBase64Image()을 이용해서 이미지(.png)로 저장 할 때 배경화면 흰색으로 바꾸기

Chart.js의 toBase64Image()을 이용해서 이미지(.png)로 저장 할 때 배경화면 흰색으로 바꾸기

 

var popData = {
      datasets: [{
          label: ['query', 'GRPS'],
          data: [{
              x: 24,
              y: 38400
          }, {
              x: 66,
              y: 20000
          }, {
              x: 41,
              y: 15240
          }, {
              x: 27,
              y: 34245
          }, {
              x: 8,
              y: 8564
          }, {
              x: 20,
              y: 4542
          }, {
              x: 34,
              y: 17550
          }, {
              x: 75,
              y: 6740
          }, {
              x: 87,
              y: 34554
          }, {
              x: 46,
              y: 19245
          }, {
              x: 12,
              y: 18564
          }, {
              x: 68,
              y: 21054
          }],
          backgroundColor: "#c8135c",
          pointRadius: 2,
          pointHoverRadius: 3
      }]
};

const plugin = {
    id: 'customCanvasBackgroundColor',
    beforeDraw: (chart, args, options) => {
        const { ctx } = chart;
        ctx.save();
        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = options.color || '#99ffff';
        ctx.fillRect(0, 0, chart.width, chart.height);
        ctx.restore();
    }
};

var ctx0101 = document.getElementById("myChart0101");
var myChart0101 = new Chart(ctx0101, {
type: 'scatter',
data: popData,
options: {
legend: {display: false},
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
              customCanvasBackgroundColor: {
                  color: 'white',
              }
          },
animation: {
duration: 0
          },
onClick: function(event, elements) {
  if (elements && elements.length > 0) {
var index = elements[0]._index;
var dataset = this.data.datasets[0];
dataset.data.splice(index, 1);
this.update();
  }
}
      },
      plugins: [plugin],
});