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.