Control points are misaligned with respect to the shape when dpi is not 1 and zoom is applied

[hoon720823]

window.devicePixelRatio value is 1.5

canvas construct code

this.canvas = new fabric.Canvas(this.canvasEl, {
      backgroundColor: this.#options.backgroundColor,
      hoverCursor: 'pointer',
      preserveObjectStacking: true,
      selection: false,
      targetFindTolerance: 2,
      fireRightClick: true,
      fireMiddleClick: true,
      stopContextMenu: true,
      enableRetinaScaling: true,
      isDrawingMode: false
    })

Load Image

  #drawImage(image) {
    this.canvas.backgroundImage = image
    this.#width = image.width
    this.#height = image.height
    this.fitToScreen()
  }

zoom code

  fitToScreen() {
      this.#computePanelSize()
      this.canvas.setZoom(1)
      this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0])

      const widthRatio = this.canvas.width / this.#width
      const heightRatio = this.canvas.height / this.#height
      this.#zoom = Math.min(widthRatio, heightRatio)
      this.canvas.setZoom(this.#zoom)

      const scaledImageWidth = this.#width * this.#zoom
      const scaledImageHeight = this.#height * this.#zoom
      const dx = (this.canvas.width - scaledImageWidth) / 2
      const dy = (this.canvas.height - scaledImageHeight) / 2
      const transform = this.canvas.viewportTransform
      transform[4] += dx
      transform[5] += dy

      this.canvas.requestRenderAll()
  }

Does anyone know how to fix this please?

[zhe-he]

Call setCoords when changing the position and size of the graphic.
this.setCoords()