Pxls Chrome canvas displacement workaround

pxls_chrome_canvas_workaround.user.js

// ==UserScript==
// @name         Pxls Chrome canvas fix
// @namespace    netux.site/pxls/chrome-canvas
// @version      1.0
// @description  fix Pxls canvas displacement on Chrome
// @author       Netux
// @match        https://pxls.space/
// @run-at       document-body
// @grant        none
// ==/UserScript==

(() => {
    const chromeUserAgentData = navigator.userAgent.match(/Chrome\/(\d+)/)
    if (!chromeUserAgentData) {
        console.warn('You have Pxls Chrome canvas fix enabled, but your browser isn\'t Chrome, so you don\'t need it! ;)')
        return
    }

    const [ chromeVersionStr ] = chromeUserAgentData
    if (parseInt(chromeVersionStr) < 78) {
        console.warn('You have Pxls Chrome canvas fix enabled, but your browser version is too old to need it! ;)')
        return
    }

    const boardContainer = document.getElementById('board-container')

    const xor = (a, b) => a || b && !a || !b

    function fixBoardSize() {
        const widthSubtraction = window.innerWidth % 2 ? '0px' : '1px'
        const heightSubtraction = window.innerHeight % 2 ? '0px' : '2px'

        boardContainer.style.width = `calc(100vw - ${widthSubtraction})`
        boardContainer.style.height = `calc(100vh - ${heightSubtraction})`
    }
    window.addEventListener('resize', fixBoardSize)
    fixBoardSize()
})()