Using chart.js with a background image plugin, can't get entire image to show

I have successfully created a canvas background image plugin for a Chart.js chart, as shown here.

I'm using the plugin, instead of a CSS background, because I need the image to stay with the chart data points ('scatter' type chart).

However, I can't make it show the entire image, no matter what settings I try in the plugin. It is cropping the image vertically.

As per a request, I am editing this post by adding the relevant code here. I import the data from a db, but I'm adding some it here as static code.

Chart.register(ChartDataLabels);
    
let dbstates = '["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Washington D.C.","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana"]';

let xcoord = '[{"x":"10","y":"1","label":"AL"},{"x":"10","y":"2","label":"AK"},{"x":"5","y":"5","label":"AZ"},{"x":"5","y":"15","label":"AR"},{"x":"15","y":"5","label":"CA"},{"x":"20","y":"1","label":"CO"},{"x":"3","y":"3","label":"CT"}]';

let myChart;
    
    (async function() {
    
    const isTest = false;
    let onDrag = undefined;
    let jsonmap = JSON.parse(xcoord);
    
    Chart.register({
        id: 'custplugin'
    });
    
    const image = new Image();
    image.src = 'images/ECOS-Southside-booths1.jpg';
    
    const custplugin = {
      id: 'custplugin',
      beforeDraw: (chart) => {
        if (image.complete) {
          const ctx = chart.ctx;
          const {top, left, width, height} = chart.chartArea;
          const x = left + width / 2 - image.width / 2;
          const y = top + height / 2 - image.height / 2;
          ctx.drawImage(image, x, y);
        } else {
          image.onload = () => chart.draw();
        }
      }
    };
    
    const data = {
      labels: JSON.parse(dbstates),
      datasets: [{
        label: 'Location',
        data: jsonmap,
        backgroundColor: 'rgb(255, 99, 132)',
        pointHitRadius: 5,
        }],
    };
    
    const config = {
      type: 'scatter',
      data: data,
      responsive: false,
      maintainAspectRatio: true,
      plugins: [ custplugin ], // declare custom plugin
      options: {
        animation: false,
        layout: { padding: { left: 0, right: 0, top: 0, bottom: 0 } },
        plugins: {
            custplugin: {
                borderColor: 'black',
            },
       },
       scales: {
          x: {
            display: false,
          },
          y: {
            display: false,
          }
        },
      elements: {
        point: {
          radius: 10,
          hoverRadius: 15
        }
      }
      }
    };
    
    const ctx = document.getElementById('pie-chart');
    
    myChart = new Chart(ctx, config);
    })();

I tried setting CSS 'overflow: visible' for the 'canvas' element and the div holding that, but that has no effect. I've tried messing with the 'const x' and 'const y' settings in the plugin, but nothing seems to work.

How can I get the entire image to show?

Thanks for any help.

Okay, I just needed to set the canvas size element to the image size in the html:

<canvas id="pie-chart" width=978 height=653></canvas>