function renderGridLinesCanvas($canvas, [rows, cols]) {
    $canvas.width = $canvas.offsetWidth * 2
    $canvas.height = $canvas.offsetHeight * 2

    const g = $canvas.getContext('2d')
    const width = $canvas.width / 2
    const height = $canvas.height / 2
    g.scale(2, 2)

    g.strokeStyle = '#ddd'
    g.lineWidth = 2
    g.setLineDash([4, 4])

    for (let i = 0; i < cols + 1; i++) {
        const x = 2 + ((width - 4) / cols) * i
        g.beginPath()
        g.moveTo(x, 0)
        g.lineTo(x, height)
        g.stroke()
    }

    for (let j = 0; j < rows + 1; j++) {
        const y = 2 + ((height - 4) / rows) * j
        g.beginPath()
        g.moveTo(0, y)
        g.lineTo(width, y)
        g.stroke()
    }
}

export function createGridLineCanvas($roomGrid) {
    const $canvas = document.createElement('canvas')
    $roomGrid.append($canvas)

    $canvas.style.position = 'absolute'
    $canvas.style.inset = '0'
    $canvas.style.width = '100%'
    $canvas.style.height = '100%'
    $canvas.style.zIndex = '-1'

    const [rows, cols] = getComputedStyle($roomGrid)
        .getPropertyValue('aspect-ratio')
        .split('/')
        .reverse()
        .map(s => parseInt(s))

    const render = () => renderGridLinesCanvas($canvas, [rows, cols])

    window.addEventListener('resize', render)
    requestAnimationFrame(render)
}