What is the correct way to adjust canvas scaling when changing resolution?

Question

JavaScript

Hi, I'm new to canvas and I'm having a problem.

Here is my current code: https://codepen.io/lineez/pen/KKvmxNe?editors=0010

I am getting dynamic data from template on page load as "const objects" here.

The initial canvas size is 1150x610 and in this situation everything works fine, but the problems start when the resolution is changed to a smaller one. When I paint the area before hovering (black), it looks correct, but if I hover over the area, the shading shifts.

Change the canvas size to less than 1150 to see the hover

problem

This is my first experience with a host. I definitely need the ability to hang events on the filled areas, and this is the only way I can do it now. Any help on the issue is welcome.

Answer 1

As an option

canvas.addEventListener('mousemove', function(event) {
      let scaleFactor = 1150/plan.offsetWidth;
      event = {
        offsetX:event.offsetX*scaleFactor,
        offsetY:event.offsetY*scaleFactor
      }
        for(let i = arr.length - 1; i >= 0; i--) {
...