increase signature size

app/javascript/elements/signature_form.js

@@ -5,8 +5,12 @@ export default targetable(class extends HTMLElement {
   static [target.static] = ['canvas', 'input', 'clear', 'button']
 
   async connectedCallback () {
-    this.canvas.width = this.canvas.parentNode.parentNode.clientWidth
+    const scale = 3
-    this.canvas.height = this.canvas.parentNode.parentNode.clientWidth / 3
+
+    this.canvas.width = this.canvas.parentNode.clientWidth * scale
+    this.canvas.height = this.canvas.parentNode.clientHeight * scale
+
+    this.canvas.getContext('2d').scale(scale, scale)
 
     const { default: SignaturePad } = await import('signature_pad')
 

app/views/user_initials/edit.html.erb

@@ -16,7 +16,7 @@
     <%= form_for @user_config, url: user_initials_path, method: :put, data: { turbo_frame: :_top }, html: { autocomplete: :off, enctype: 'multipart/form-data' } do |f| %>
       <signature-form class="relative block">
         <a class="absolute top-1 right-1 link text-sm" data-target="signature-form.clear" href="#">Clear</a>
-        <canvas data-target="signature-form.canvas" class="bg-white border border-base-300 rounded"></canvas>
+        <canvas data-target="signature-form.canvas" class="bg-white border border-base-300 w-full rounded"></canvas>
         <input name="file" class="hidden" data-target="signature-form.input" type="file" accept="image/png,image/jpeg,image/jpg">
         <div class="form-control mt-4">
           <%= f.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button', data: { target: 'signature-form.button' } %>

app/views/user_signatures/edit.html.erb

@@ -16,7 +16,7 @@
     <%= form_for @user_config, url: user_signature_path, method: :put, data: { turbo_frame: :_top }, html: { autocomplete: :off, enctype: 'multipart/form-data' } do |f| %>
       <signature-form class="relative block">
         <a class="absolute top-1 right-1 link text-sm" data-target="signature-form.clear" href="#">Clear</a>
-        <canvas data-target="signature-form.canvas" class="bg-white border border-base-300 rounded"></canvas>
+        <canvas data-target="signature-form.canvas" class="bg-white border border-base-300 w-full rounded"></canvas>
         <input name="file" class="hidden" data-target="signature-form.input" type="file" accept="image/png,image/jpeg,image/jpg">
         <div class="form-control mt-4">
           <%= f.button button_title(title: 'Save', disabled_with: 'Saving'), class: 'base-button', data: { target: 'signature-form.button' } %>