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>
)You access refs by the current-property.
Try this
console.log(sigCanvasRef.current.getTrimmedCanvas().toDataURL("image/png"))