TypeError: sigCanvasRef.getTrimmedCanvas is not a function

Question

I get the error above when using getTrimmedCanvas. I read that when using a background style this error occurs because it needs a white background or something like that.

Theres more code but i only pasted the relevant stuff.

Thank you for helping!

import Popup from "reactjs-popup";
import SignaturePad from "react-signature-canvas";

export default function Homepage() {

    const sigCanvasRef = useRef({});

    const clear = () => sigCanvasRef.current.clear();

const save = () =>
   console.log(sigCanvasRef.getTrimmedCanvas().toDataURL("image/png"))

return(
<Popup modal trigger={<Button style={{ maxWidth: '40px', maxHeight: '40px', minWidth: '40px', minHeight: '40px' }} color="inherit">
<CreateIcon />
</Button>}
closeOnDocumentClick={false}
>
{close => (
    <>
        <div className={sigCanvas.signatureCanvas} >
            <SignaturePad
                ref={sigCanvasRef}
                canvasProps={
                    {
                        style: {background: 'white', width:'100%', minHeight:'650%'}
                    }
                } />
        </div>
        <Button variant="contained" onClick={close}>back</Button>
        <Button variant="contained" onClick={clear}>clear</Button>
        <Button variant="contained" onClick={save}>save</Button>
    </>
)}

</Popup>
)

Answer 1

You access refs by the current-property.

Try this

console.log(sigCanvasRef.current.getTrimmedCanvas().toDataURL("image/png"))