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. I’m using the same setup as shown at the link:

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();
    }
  }
};

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.