From 3a549409cfc63fc881d3d906766d8bdae86a2813 Mon Sep 17 00:00:00 2001
From: Pavel Rybalko <pavel@parity.io>
Date: Wed, 17 Nov 2021 21:47:32 +0700
Subject: [PATCH] fix #76 add default passphrase canvas width (#77)

* fix #76 add default passphrase canvas width

* add padLeft constant
---
 src/components/CanvasText.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/CanvasText.vue b/src/components/CanvasText.vue
index 9e499ac..ca610d2 100644
--- a/src/components/CanvasText.vue
+++ b/src/components/CanvasText.vue
@@ -9,8 +9,8 @@ export default Vue.extend({
   name: "CanvasText",
   directives: {
     canvasMessage: function(el: HTMLElement, binding: VNodeDirective): void {
-      const canvasElement = el as HTMLCanvasElement,
-        context = canvasElement.getContext("2d");
+      const canvasElement = el as HTMLCanvasElement;
+      const context = canvasElement.getContext("2d");
       if (!context) {
         // eslint-disable-next-line no-console
         console.warn("Failed to find canvasElement context");
@@ -19,10 +19,11 @@ export default Vue.extend({
       context.clearRect(0, 0, canvasElement.width, canvasElement.height);
       context.fillStyle = "black";
       context.font = "20px Arial";
-      const textSize = context.measureText(binding.value);
-      canvasElement.setAttribute("width", textSize.width + 20 + "px");
+      const textWidth = context.measureText(binding.value).width || 450;
+      const padLeftPx = 15;
+      canvasElement.setAttribute("width", textWidth + padLeftPx + "px");
       context.font = "20px Arial";
-      context.fillText(binding.value, 15, 20);
+      context.fillText(binding.value, padLeftPx, 20);
     }
   },
   props: {