From 185aecec4247ca3d85b0f623dbc5fa8baed3c9e7 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete.matsy@gmail.com>
Date: Tue, 18 Jun 2024 17:18:23 +0300
Subject: [PATCH] increase signature size

---
 app/javascript/elements/signature_form.js | 8 ++++++--
 app/views/user_initials/edit.html.erb     | 2 +-
 app/views/user_signatures/edit.html.erb   | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/javascript/elements/signature_form.js b/app/javascript/elements/signature_form.js
index 535fc8a6..55020081 100644
--- a/app/javascript/elements/signature_form.js
+++ b/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
-    this.canvas.height = this.canvas.parentNode.parentNode.clientWidth / 3
+    const scale = 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')
 
diff --git a/app/views/user_initials/edit.html.erb b/app/views/user_initials/edit.html.erb
index 08a67d31..84bb1c9d 100644
--- a/app/views/user_initials/edit.html.erb
+++ b/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' } %>
diff --git a/app/views/user_signatures/edit.html.erb b/app/views/user_signatures/edit.html.erb
index cd60e4be..53822ce6 100644
--- a/app/views/user_signatures/edit.html.erb
+++ b/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' } %>