Display an element generated inside the canvas outside of the canvas – fabricjs

Now when pointing at the intersection of lines, a black square dot is displayed. Inside the canvas everything is fine, it is displayed completely, but if you point at the edge of the block where there is also an intersection, the square dot is displayed strictly on the borders of the canvas. Is there any way to display a black square point when hovering outside the canvas on either side.

How it works now
The way it should be displayed

const canvasSize = { width: 500, height: 500 }
const cellDimensions = { width: 50, height: 50 }
const borderStrokeWidth = 3
const objectTypes = {
    frame: 'frame',
    gridPoint: 'point',
    gridLine: 'line',
}

let drawingCanvas

initCanvas()

function initCanvas(id = 'canvas') {

    drawingCanvas = new fabric.Canvas(id, {
        height: canvasSize.height + borderStrokeWidth,
        width: canvasSize.width + borderStrokeWidth,
        hoverCursor: 'default',
        backgroundColor: 'gray',
        selection: false,
    })

   drawingCanvas.on('mouse:over', (e) => {
        if (e.target?.type === objectTypes.gridPoint) {
            drawingCanvas.bringToFront(e.target)
            e.target.set('opacity', 1)
            drawingCanvas.renderAll()
        }
    })

    drawingCanvas.on('mouse:out', (e) => {
        if (e.target?.type === objectTypes.gridPoint) {
            e.target.set('opacity', 0)
            drawingCanvas.renderAll()
        }
    })

    drawingCanvas.on('object:modified', (e) => {
        const obj = e.target
        const { y: top, x: left } = obj.getPointByOrigin('left', 'top')
        obj.set({ top, left, originX: 'left', originY: 'top' })
        drawingCanvas.renderAll()
    })

    drawGrid()
}

function drawGrid() {
    const { width: colSize, height: rowSize } = cellDimensions

    const makePoint = (x, y) => {
        const r = 8
        const point = new fabric.Rect({
            top: y - r,
            left: x - r,
            width: r * 2,
            height: r * 2,
            rx: 1,
            ry: 1,
            fill: 'black',
            hasControls: false,
            hasBorders: false,
            selectable: false,
            opacity: 0,
            type: objectTypes.gridPoint,
            hoverCursor: 'pointer',
        })

        drawingCanvas.add(point)
    }

    const drawLine = (params) => {
        const line = new fabric.Line(params, {
            stroke: 'yellow',
            strokeWidth: borderStrokeWidth,
            selectable: false,
            evented: false,
            type: objectTypes.gridLine,
        })
        drawingCanvas.add(line)
    }

    const makeRows = () => {
        const rowsCount = canvasSize.height / rowSize
        for (let i = 0; i <= rowsCount; i++) {
            const y = i * rowSize
            drawLine([0, y, canvasSize.width, y])
        }
    }

    const makeCols = () => {
        const colsCount = canvasSize.width / colSize
        for (let i = 0; i <= colsCount; i++) {
            const x = i * colSize
            drawLine([x, 0, x, canvasSize.height])
        }
    }

    const makePoints = () => {
        const rowsCount = canvasSize.height / rowSize
        const colsCount = canvasSize.width / colSize
        for (let i = 0; i <= colsCount; i++) {
            const x = i * colSize
            for (let j = 0; j <= rowsCount; j++) {
                const y = j * rowSize
                makePoint(x, y)
            }
        }
    }

    makeRows()
    makeCols()
    makePoints()
}

<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>

Tried increasing the padding at the canvas, but that didn’t produce any results.