chartJS shadow draws outside of chartArea

Question

I am looking for a solution to a chartJS issue. I am using shadowing to draw on my chart, but the shadowing falls outside of the chart area itself. I have been trying to resolve for hours, with no luck at all. If anyone has chartJS experience, I would really appreciate the help!

const shadingArea = {
    id: 'shadingArea',
    beforeDatasetsDraw: function (chart, args, options) {
        const {ctx, chartArea: {top, bottom, left, right, width, height}, scales: {x, y}} = chart;

        const tickHeight = y.height / y._valueRange;

        const datapointsLength = chart.data.labels.length;

        ctx.save();
        ctx.beginPath();

        ctx.fillStyle = 'rgba(255, 0, 0, 0.4)';
        ctx.strokeStyle = 'rgba(255, 26, 104, 1)';

        ctx.moveTo(chart.getDatasetMeta(0).data[0].x, chart.getDatasetMeta(0).data[0].y + tickHeight * chart.data.datasets[0].shadingRange[0].min);
        for (let i = 1; i < datapointsLength; i++) {
            ctx.lineTo(chart.getDatasetMeta(0).data[i].x, chart.getDatasetMeta(0).data[i].y + tickHeight * chart.data.datasets[0].shadingRange[i].min);
        }
        for (let z = datapointsLength - 1; 0 < z; z--) {
            ctx.lineTo(chart.getDatasetMeta(0).data[z].x, chart.getDatasetMeta(0).data[z].y - tickHeight * chart.data.datasets[0].shadingRange[z].max);
        }

        ctx.lineTo(chart.getDatasetMeta(0).data[0].x, chart.getDatasetMeta(0).data[0].y - tickHeight * chart.data.datasets[0].shadingRange[0].max);

        ctx.closePath();
        ctx.fill();

    }
}