Add a prop to prevent scaling the canvas based on the device pixel ratio

The default behavior is to resize and scale the canvas up based on the device pixel ratio (using `window.devicePixelRatio`). For example, if the ratio is 3, the `width` and `height` of the canvas will be multiplied by 3. This causes the output to be 3x the size as well, which can be undesired. This change adds a `scaleToDevicePixelRatio` prop, which defaults to `true`, but allows setting it to `false` which will prevent scaling the canvas.
neighborhood999 · Feb 10, 2022 · afabbfb · afabbfb
1 parent a320bdb
commit afabbfb
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -83,13 +83,14 @@ export default {
 
 ## Props
 
-| Name        | Type   | Default                                                                                                 | Description                              | Example                                                                                                                         |
-| :---------- | :----- | :------------------------------------------------------------------------------------------------------ | :--------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------ |
-| width       | String | `100%`                                                                                                  | Set the `div` width.                     | -                                                                                                                               |
-| height      | String | `100%`                                                                                                  | Set the `div` height.                    | -                                                                                                                               |
-| options     | Object | [Reference](https://github.com/neighborhood999/vue-signature-pad/blob/master/src/utils/index.js#L5-L13) | Set the signature pad options.           | [Reference](https://github.com/neighborhood999/vue-signature-pad/blob/master/src/utils/index.js#L5-L13)                         |
-| images      | Array  | `[]`                                                                                                    | Merge signature with the provide images. | `['A.png', 'B.png', 'C.png']` or `[{ src: 'A.png', x: 0, y: 0 }, { src: 'B.png', x: 0, y: 10 }, { src: 'C.png', x: 0, y: 20 }]` |
-| customStyle | Object | `{}`                                                                                                    | Custom `div` style.                      | `{ border: black 3px solid }`                                                                                                   |
+| Name                    | Type    | Default                                                                                                 | Description                                                                                                                      | Example                                                                                                                         |
+|:------------------------|:--------|:--------------------------------------------------------------------------------------------------------|:---------------------------------------------------------------------------------------------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------|
+| width                   | String  | `100%`                                                                                                  | Set the `div` width.                                                                                                             | -                                                                                                                               |
+| height                  | String  | `100%`                                                                                                  | Set the `div` height.                                                                                                            | -                                                                                                                               |
+| options                 | Object  | [Reference](https://github.com/neighborhood999/vue-signature-pad/blob/master/src/utils/index.js#L5-L13) | Set the signature pad options.                                                                                                   | [Reference](https://github.com/neighborhood999/vue-signature-pad/blob/master/src/utils/index.js#L5-L13)                         |
+| images                  | Array   | `[]`                                                                                                    | Merge signature with the provide images.                                                                                         | `['A.png', 'B.png', 'C.png']` or `[{ src: 'A.png', x: 0, y: 0 }, { src: 'B.png', x: 0, y: 10 }, { src: 'C.png', x: 0, y: 20 }]` |
+| customStyle             | Object  | `{}`                                                                                                    | Custom `div` style.                                                                                                              | `{ border: black 3px solid }`                                                                                                   |
+| scaleToDevicePixelRatio | Boolean | `true`                                                                                                  | Scale the canvas up to match the [device pixel ratio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio). | -                                                                                                                               |
 
 ## Methods
 

diff --git a/src/components/VueSignaturePad.vue b/src/components/VueSignaturePad.vue
@@ -32,6 +32,10 @@ export default defineComponent({
     images: {
       type: Array,
       default: () => []
+    },
+    scaleToDevicePixelRatio: {
+      type: Boolean,
+      default: () => true
     }
   },
 
@@ -91,7 +95,9 @@ export default defineComponent({
     resizeCanvas() {
       const canvas = this.$refs.signaturePadCanvas;
       const data = this.signaturePad.toData();
-      const ratio = Math.max(window.devicePixelRatio || 1, 1);
+      const ratio = this.scaleToDevicePixelRatio
+        ? Math.max(window.devicePixelRatio || 1, 1)
+        : 1;
 
       canvas.width = canvas.offsetWidth * ratio;
       canvas.height = canvas.offsetHeight * ratio;