src/components/MarkInputs/Signature.module.scss

@@ -11,10 +11,10 @@ $padding: 5px;
 
 .relative {
   position: relative;
+  outline: 1px solid black;
 }
 
 .canvas {
-  outline: 1px solid black;
   background-color: $body-background-color;
   cursor: crosshair;
 

src/components/MarkInputs/Signature.tsx

@@ -7,7 +7,7 @@ import styles from './Signature.module.scss'
 import { MarkRenderSignature } from '../MarkRender/Signature'
 import SignaturePad from 'signature_pad'
 import { Config, optimize } from 'svgo'
-import { SIGNATURE_PAD_OPTIONS } from '../../utils/const'
+import { SIGNATURE_PAD_OPTIONS, SIGNATURE_PAD_SIZE } from '../../utils/const'
 
 export const MarkInputSignature = ({
   value,
@@ -58,10 +58,16 @@ export const MarkInputSignature = ({
   return (
     <>
       <div className={styles.wrapper}>
-        <div className={styles.relative}>
+        <div
+          className={styles.relative}
+          style={{
+            width: SIGNATURE_PAD_SIZE.width,
+            height: SIGNATURE_PAD_SIZE.height
+          }}
+        >
           <canvas
-            height={location?.height}
+            width={SIGNATURE_PAD_SIZE.width}
-            width={location?.width}
+            height={SIGNATURE_PAD_SIZE.height}
             ref={canvasRef}
             className={styles.canvas}
           ></canvas>

src/components/MarkRender/Signature.tsx

@@ -1,12 +1,16 @@
 import { MarkRenderProps } from '../../types/mark'
+import { SIGNATURE_PAD_SIZE } from '../../utils'
+import styles from './Signature.module.scss'
 
-export const MarkRenderSignature = ({ value, mark }: MarkRenderProps) => {
+export const MarkRenderSignature = ({ value }: MarkRenderProps) => {
   const segments: string[][] = value ? JSON.parse(value) : []
 
   return (
     <svg
-      viewBox={`0 0 ${mark.location.width} ${mark.location.height}`}
+      preserveAspectRatio="xMidYMid meet"
+      viewBox={`0 0 ${SIGNATURE_PAD_SIZE.width} ${SIGNATURE_PAD_SIZE.height}`}
       strokeLinecap="round"
+      className={styles.svg}
     >
       {segments.map(([path, width]) => (
         <path d={path} strokeWidth={width} stroke="black" fill="none" />

src/utils/const.ts

@@ -117,3 +117,8 @@ export const SIGNATURE_PAD_OPTIONS = {
   minWidth: 0.5,
   maxWidth: 3
 } as const
+
+export const SIGNATURE_PAD_SIZE = {
+  width: 600,
+  height: 300
+}