does the position need to convert when hightlight pdf?

[jiangxiaoqiang]

Now I can get the axios information from backend and now I need to hightlight the axios area. This is my code look like:

import React, { useRef } from 'react';
import { Page } from 'react-pdf';
import { Document } from 'react-pdf';
import { DocumentCallback, Options, PageCallback } from 'react-pdf/dist/cjs/shared/types';
import { pdfjs } from 'react-pdf';
import 'react-pdf/dist/Page/TextLayer.css';
import styles from './App.module.css';
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

const App: React.FC = React.memo(() => {

  const canvasArray = useRef<Array<React.MutableRefObject<HTMLCanvasElement | null>>>([]);

  const handlePageRenderSuccess = (page: PageCallback) => {

  };

  const options: Options = {
    cMapUrl: `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/cmaps/`,
    httpHeaders: {
      'Authorization': 'Bearer ' + "getAccessToken()"
    }
  };

  const docuemtLocadSuccess = (pdf: DocumentCallback) => {
    renderSingleHighlight();
  }

  const updateRefArray = (index: number, element: HTMLCanvasElement | null) => {
    if (element) {
      canvasArray.current[index] = { current: element };
    }
  };

  const handlePageChange = (page: any) => {

  };

  const renderPages = (totalPageNum: number | undefined) => {
    if (!totalPageNum || totalPageNum < 1) return;
    const tagList: JSX.Element[] = [];
    for (let i = 1; i <= totalPageNum; i++) {
      tagList.push(
        <Page key={i}
          scale={1}
          onLoad={handlePageChange}
          canvasRef={(element) => updateRefArray(i, element)}
          onChange={handlePageChange}
          onRenderSuccess={handlePageRenderSuccess}
          pageNumber={i} >
        </Page>
      );
    }
    
    return tagList;
  }

  const renderSingleHighlight = () => {
    debugger
    let page = 1;
    let canvas = canvasArray.current[page];
    if (!canvas || !canvas.current) return;
    var context = canvas.current.getContext('2d');
    if (!context) return;
    context.save();
    const x = 114.049141;
    const y = 475.632965;
    const width = 425.196838;
    const height = 11.156238;
    context.fillStyle = 'rgba(255, 255, 0, 0.3)';
    context.fillRect(x, y, width, height);
    context.restore();
}

  return (
    <div>
      <Document options={options}
        file={"http://localhost:3000/main.pdf"}
        onLoadSuccess={docuemtLocadSuccess}>
        {renderPages(25)}
      </Document>
    </div>
  );
}, (prevProps, nextProps) => {
  let shouldRerender = true;
  return shouldRerender;
})

export default App;

what I want to do is that the highligt function could highlight some rows user select, the highlight works but it looks iike just work in a small pieces area. and not highlight the rows of pdf, highlight the wrong places. Am I missing something? I am sure the axios are correct.