Saving and Restoring DataURL results in smaller image

[mweel1]

Whenever I save the value, and restore the value the image is smaller then the viewport.

What is the best way to save a value and restore it on the signature pad?

import { FieldSignature, FieldTextBox } from "../types";
import { Input } from "../../components/input";
import { Label } from "../../components/label";
import SignatureCanvas from "react-signature-canvas";
import React from "react";

export function Signature(props: {
  signature: FieldSignature;
  onUpdate?: (field: FieldSignature) => void;
  onInit?: (field: FieldSignature) => void;
}) {
  const canvas = React.useRef<SignatureCanvas>(null);

  React.useEffect(() => {
    if (canvas.current) {
      if (props.signature.value)
        canvas.current.fromDataURL(props.signature.value);
    }
  }, []);
  return (
    <>
      {props.signature.label && (
        <>
          <div className="pb-3">
            <Label>
              {props.signature.label} {props.signature.required ? "*" : ""}
            </Label>
          </div>
        </>
      )}

      <SignatureCanvas
        ref={canvas}
        penColor="green"
        onEnd={(e) => {
          alert("Updating");
          const f = {
            ...props.signature,
            value: canvas.current!.getCanvas().toDataURL(),
          };

          if (props.onUpdate) props.onUpdate(f);
        }}
        canvasProps={{
          width: 500,
          height: 200,
          className:
            "sigCanvas border-[5px] rounded-md border-dashed border-b-red-300",
        }}
      />
      {props.signature.subLabel && (
        <>
          <div className="text-sm text-muted-foreground pt-2">
            {props.signature.subLabel}
          </div>
        </>
      )}
    </>
  );
}

[agilgur5]

Seems to be a duplicate of #6. You can specify a width and height as options to fromDataURL.