javascript — панель подписи не работает на мобильных устройствах

У меня есть подписная панель в проекте Laravel, которая работает на настольном компьютере, но когда я тестирую на мобильном устройстве, она не работает.

Я много искал об этой проблеме, я пытался по-другому …
Я проверяю метатеги, я проверяю ссылку cdnjs, я создаю новое представление, чтобы поместить только этот мир кода и не работаю. Я не знаю в чем проблема.

Если я иду на демонстрационную страницу (http://szimek.github.io/signature_pad/) и попробуйте запустить это на мобильных работах!

Итак, я нашел пример, и я попытался сделать это именно в моем проекте Laravel и не работает. После этого я ставлю тот же код в jsfiddle и работает (https://jsfiddle.net/6brfy7gq/1/).

Это работает на рабочем столе, я могу рисовать, сохранять изображения, все, но когда я пытаюсь мобильный, не работают. Но, как вы можете проверить, тот же код в jsfiddle работает в мобильном телефоне. Я заметил, что не могу прокрутить страницу выше canvas в мобильном телефоне jsfiddle, но в моем проекте laravel он прокручивается. Может быть, это проблема.
Я не знаю, что попробовать еще!

Итак, каковы различия между моим кодом и этим?
В файле JS у меня есть код внутри document ready как это:

      $(document).ready(function ()
{
var wrapper = document.getElementById("signature-pad");
var clearButton = wrapper.querySelector("[data-action=clear]");
var savePNGButton = wrapper.querySelector("[data-action=save-png]");
var canvas = document.getElementById('signature-canvas');



// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
var ratio =  Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
// On mobile devices it might make more sense to listen to orientation change,
// rather than window resize events.
window.onresize = resizeCanvas;
resizeCanvas();
var signaturePad = new SignaturePad(canvas);


function download(dataURL, filename) {
var blob = dataURLToBlob(dataURL);
var url = window.URL.createObjectURL(blob);

var a = document.createElement("a");
a.style = "display: none";
a.href = url;
a.download = filename;

document.body.appendChild(a);
a.click();

window.URL.revokeObjectURL(url);
}

// One could simply use Canvas#toBlob method instead, but it's just to show
// that it can be done using result of SignaturePad#toDataURL.
function dataURLToBlob(dataURL) {
// Code taken from https://github.com/ebidel/filer.js
var parts = dataURL.split(';base64,');
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);

for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}

return new Blob([uInt8Array], { type: contentType });
}

clearButton.addEventListener("click", function (event) {
signaturePad.clear();
});


savePNGButton.addEventListener("click", function (event) {

var dataUrl = signaturePad.toDataURL();
//document.getElementById('imagen_firma').src = dataUrl;
var image = dataUrl.replace(/^data:image\/(png|jpg);base64,/, "");
$('input[name=signatureImage]').val(image);
//download(dataURL, "signature.png");

});


});

И HTML был загружен в представление лезвия, как это:

<div class="sub-title">
<span>Signature</span>
</div>
<div class="data new" >

<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas id="signature-canvas" style="width:650px;height:420px;max-width:100%;border:8px #CCC solid;background-color: white;"></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>

<div class="signature-pad--actions">
<div>
<i class="button clear icon-cancel" data-action="clear" style="font-size:2em;" title="Clear"></i>
<button type="button" class="button save" data-action="save-png" style="visibility:hidden">Save as PNG</button>
</div>
</div>
</div>
</div>
</div>

{{ Form::hidden('signatureImage', old('signatureImage')) }}

Я могу попробовать что угодно …

Спасибо большое