I want to create thisPixel Effectfrom a front-end expert.

Although I was able to achieve the entire pixel effect on a full screen canvas:

const canvas = getElementById('canvas'); canvas.height = window.innerHeight; // 给画布设置全屏高度 canvas.width= window.innerWidth; // 给画布设置全屏宽度

And it’s easy to get the coordinates of the mouse

const mouse = { x: undefined, y: undefined } canvas.addEventListner('mousemove', function(e) { mouse.x = e.x; mouse.y = e.y; }

At this time the width and height of the canvas are equal to the document, so it is easy to obtain the accurate coordinates of the mouse. But when I try to use dimensions of800px Accuracy of what appears on the above website. There are also some issues related to resizing.

I want to know how to maintain mouse accuracy.

Thank you for your help.