Scaling issue on custom canvas over react-pdf page

[imimoosa]

Hi,

Thanks for this great repo. I am attempting to build a pdf editor over the react-pdf page that is rendered. I understand that the Page component exposes the canvasRef, but I thought of creating a separate Canvas element that is overlaid on the react-pdf Page. The Page is displayed within a parent div, which then scales the page beyond the initial 596 x 842 px (A4 size) and displays a scrollbar for the user to scroll down on the page. My canvas element is positioned directly over the Page, but due to something that I am not doing correctly, the scaling of my canvas is not correct, and gets either pixelated or drawings look thicker.

This is not an issue with the react-pdf repo, but rather assistance I need with regards to scaling. The issue experienced is that the drawings look fine at 596 x 842 and smaller, but once the screen scales bigger than this, the drawings looks pixelated and thicker. Can someone please assist in anyway with this scaling issue? I have been at this for the last 2 days with no joy.

Here is my current code for the render part of my component

{pdfFile && (
            <div id="row" style={{'marginTop': '60px', width: "100vw", maxWidth: '1024px', display: "flex", overflowY: "auto"}}>
            <StyledEditorHolder id="row">
                <PdfContent ref={pdfWrapperRef}>
            <StyledPdfDocument file={pdfFile} onLoadSuccess={handleDocumentLoadSuccess}>
              <StyledPdfPage pageNumber={currentPage} width={wrapperDivSize} />
            </StyledPdfDocument>
            <CanvasContainer
              ref={canvasRef}
              onPointerDown={handleCanvasTouchStart} 
              onPointerUp={handleCanvasTouchEnd}   
              onPointerMove={handleCanvasTouchMove}
              blockScroll={drawingEnabled}
          />
           
          </PdfContent>
          
          </StyledEditorHolder> 
          </div>
         
          
        )}

And this is the balance of code

useEffect(() => {
    if(pdfWrapperRef.current) {

      setWrapperDivSize(pdfWrapperRef.current.getBoundingClientRect().width);
      const handleResize = throttle(() => {

        if (pdfWrapperRef.current) {

          const pdfPage = document.querySelector('.react-pdf__Page');
          const newWidth = pdfPage.getBoundingClientRect().width;

          setWrapperDivSize(pdfWrapperRef.current.getBoundingClientRect().width);
        }
      }, 500);
      window.addEventListener("resize", handleResize);
      return () => {
        window.removeEventListener("resize", handleResize);
      };
    }
  }, [isOpen, pdfWrapperRef.current]);

const handleDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
    setCurrentPage(1);
    setDrawnPaths(Array.from({ length: numPages }, () => []));

    const pdfPage = document.querySelector('.react-pdf__Page'); 
    if (pdfPage) {
      const rect = pdfPage.getBoundingClientRect();
      console.log("Initial width", rect.width)
      setCurrentWidth(prevState => rect.width);
      canvasRef.current.width = 596;
      canvasRef.current.height = 842;

      console.log("Canvas", rect.width, rect.height)

      // work out the initial scale factor
      const scaleFactor = rect.width / 595.276;
      setScaleFactor(scaleFactor);
      console.log("Initial Scale factor", scaleFactor)

      setIsOpen(true);
    }
  };

Also, if it might help, here is the styling for this component

export const StyledPdfEditor = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
`;

export const StyledEditorHolder = styled.div`
  

    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    width: 100%;
    border-radius: 20px;
    display: flex;
    position: relative;
    justify-content: center;
    overflow: hidden;
`

export const PdfContent = styled.div<CanvasProps>`
  position: relative;
  display: flex;
  max-width: 1024px;
  touch-action: ${props => props.blockScroll ? "none" : "auto"};
  justify-content: center;
  overflow: auto;
  width: 100vw;
  /* Set the width to 90% of the viewport width */
  //max-width: 800px;
`;

export const CanvasContainer = styled.canvas<CanvasProps>`
  position: absolute;
  width: 100%;
  height: auto;

  touch-action: ${props => props.blockScroll ? "none" : "auto"};
  z-index: 100;
`;


export const StyledPdfPage = styled(Page)`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .react-pdf__Page {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;

  }
`;

export const StyledPdfDocument = styled(Document)`
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .react-pdf__Document {
    width: 100%;
  }
`;