search

agilgur5 / react-signature-canvas

A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad
https://agilgur5.github.io/react-signature-canvas/
Other
528 stars 115 forks source link

`toDataURL` / `fromDataURL` scaling with device pixel ratios > 1 #63

Closed buesing closed 2 years ago

buesing commented 2 years ago

When serializing the canvas data with toDataURL and then again de-serializing the same data with fromDataURL, the canvas content is not scaled correctly on device with a device pixel ratio larger than 1. The drawing is duplicated in the top left corner, scaled down: image

Here is a repro sandbox: https://codesandbox.io/s/elated-cookies-50yg2?file=/src/App.js Try it on a device with pixel ratio 1, works fine, but on a retina screen or iphone you can observe the effect above. You can even use the iPhone emulator in chrome desktop.

buesing commented 2 years ago

My bad, the solution is described here https://github.com/szimek/signature_pad#handling-high-dpi-screens

agilgur5 commented 2 years ago

Yup, those are the relevant docs for DPR scaling 👍 . This also duplicates #6