Why is there a 1px gap between the background fill and the canvas edge in my Chart.js line chart?

Question

I'm using Chart.js and react-to create a line chart, but I've noticed a small issue with the background fill. The line chart extends to the edges of the canvas as expected, but the background fill leaves a tiny gap of about 1px from the edge on all sides (top, bottom, left, and right). It almost looks like there is a 1px padding, but I haven't set any padding properties. How can I ensure the background fill extends all the way to the edges of the canvas? I have tried explicitly adding padding as 0. Changing beginAtZero values and much more but with no luck.

    <Line
      data={{
        labels: convertLabelsForChart(questionsData),
        datasets: convertDataForChart(questionsData),
      }}
      options={{
        scales: {
          y: {
            beginAtZero: true,
            grid: { display: false },
            display: false,
          },
          x: {
            grid: { display: false },
            display: false,
          },
        },
        elements: {
          point: { radius: 0 },
          line: {
            borderColor: 'rgba(17, 83, 228)',
            fill: true,
            backgroundColor: 'rgba(6, 49, 143, 1)',
          },
        },
        responsive: false,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
        },
      }}
    />

Answer 1

It turns out that this issue is caused by react-chartjs-2. Using Chart.js directly fixes this issue. I discovered this by coincidence while I was trying to make a codepen example for the issue. Another workaround that might work for some people is to make the border line very thing (0 or 1px). Apparently increasing the borderWidth (line width) increases the gap to certain extent.