Signature_pad: Usando o problema de dimensionamento de .fromDataURL()

Aliás, tem a ver com o window.devicePixelRatio não ser o mesmo por algum motivo.

Ainda investigando, acho que pode ser um problema com meu código :(

Você está usando a versão mais recente (1.3.4)? 1.3.3 deveria corrigir fromDataURL quando window.devicePixelRatio é diferente de 1, mas foi (espero) realmente corrigido em 1.3.4.

Estou usando a versão mais recente.

Quando eu corrijo a proporção corretamente (como sua demonstração), meu dedo não corresponde onde a linha está aparecendo.

Estou apenas fazendo uma demo simples, então não é tão importante e vou brincar com ela mais tarde.

Aqui está uma demonstração simples: http://jsfiddle.net/szimek/baL7r8xd. Quando você pressiona o botão "substituir", ele limpa a tela e coloca a imagem de volta após 1s. Funciona bem no iPhone com window.devicePixelRatio de 2.

Estranho, funciona no meu android também.

Obrigado, vou resolver :)

Para quem por acaso se deparar com esse problema, descobri o que estava fazendo de errado.

Antes de inserir os dados, usando .fromDataURL(data) , certifique-se de dimensionar adequadamente a tela:

      function resizeCanvas(canvas) {
        var ratio =  window.devicePixelRatio || 1;
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext('2d').scale(ratio, ratio);
      }

      resizeCanvas(canvas);

Para fazer o mesmo tamanho de imagem, você pode adicionar opções
signaturePad.fromDataURL(data, {width: 100, height: 100})
largura, altura deve ser igual ao tamanho da tela
Mais detalhes:
https://github.com/szimek/signature_pad/blob/master/src/signature_pad.ts