The image created by SigaturePad does not save the writing, it only saves the background [closed]

I’m using the signature-pad lib with livewire and alpine.

I put the canvas element in a modal and the element is rendered without problems. For example, I put the background in blue and the handwriting in yellow.

The problem happens when I save the image. When it is sent to the component and saved in the application, the image only has a blue background and the yellow writing is not passed when generating the saved image, it just leaves a blue image.

view

<x-jet-dialog-modal wire:model="showJetstreamModalCreate" maxWidth="lg"
        class="modal-dialog-centered modal-dialog-scrollable">
        <x-slot name="title">Nova Anamnese</x-slot>
        <x-slot name="content">
            <div class="modal-body">
                
                <div class="mt-2">
                    Solicitar assinatura:
                            <div x-data="signaturePad()">
                                <canvas x-ref="signature_canvas" style="border: 1px solid #cecaca;"></canvas>
                            </div>
    
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-jet-secondary-button wire:click="$toggle('showJetstreamModalCreate')">
                Fechar
            </x-jet-secondary-button>
            <x-jet-button wire:click.prevent="create" wire:loading.remove>
                Salvar Anamnese
            </x-jet-button>
            <x-jet-button wire:loading wire:target="create">
                Processando...
            </x-jet-button>
        </x-slot>
    </x-jet-dialog-modal>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
    <script>
    
        document.addEventListener('alpine:init', () => {
            Alpine.data('signaturePad', () => ({
                signaturePadInstance: null,
                init() {
                    this.signaturePadInstance = new SignaturePad(this.$refs.signature_canvas, {
                        minWidth: 5,
                        maxWidth: 10,
                        backgroundColor: 'rgb(5,5,255)',
                        penColor: "rgb(255, 255, 25)"
                    });
                    @this.set('signature', this.signaturePadInstance.toDataURL('image/png'));
                }
            }))
        })
    </script>

component

<?php
    
    namespace AppHttpLivewirePatientAnamnesis;
    
    use IlluminateSupportStr;
    use LivewireComponent;
    use IlluminateSupportFacadesStorage;
    
    class Create extends Component
    {
        public $signature;
    
    
        public function render()
        {
            return view('livewire.patient.anamnesis.create');
        }
       
    
        public function create(){
            Storage::disk('public')->put('signature.png', base64_decode(Str::of($this->signature)->after(',')));
    
        }
    
    }

I removed a lot of code from both files, sending only what is necessary for the functionality I am showing.

As you can see, I have the canvas element, and I capture the signature with alpine to send to the Livewire component, but only the background is displayed in the generated image without displaying the writing.