Esign

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ESign extends Component
{
    public $signature;

    public function render()
    {
        return view('livewire.e-sign');
    }
}

esign.blade.php

<fieldset class="Quiz--inputgroup Form--inputgroup Signature">
    <div class="flex justify-between">
        <label class="Quiz--label Form--label Signature--label">Signature</label>
    </div>
    <div>
        <div class="Quiz--input Form--input Signature--input w-auto inline-block">
            <canvas contenteditable="" width="400" height="200" id="signature-pad"
                    style="touch-action: none;" spellcheck="false"></canvas>
        </div>
        <button id="save" type="button">Save</button>
    </div>
    <div>Signature Data: {{ $signature }}</div>
    <script>
        window.signaturePad = new SignaturePad(document.getElementById('signature-pad'))
        document.getElementById('signature-pad').addEventListener('blur', function (event) {
            @this.set('signature', signaturePad.toDataURL('image/png'));
        });
    </script>
</fieldset>