sharper signature frame and text

EnvelopeGenerator.Web/wwwroot/js/annotation.js

@@ -108,39 +108,56 @@
         return frameAnnotation
     }
 
-  async createAnnotationFrameBlob(receiverName, width, height) {
+    async createAnnotationFrameBlob(receiverName, receiverSignature, width, height) {
         const canvas = document.createElement('canvas')
-    canvas.width = width
+        const scale = 4
-    canvas.height = height
+        const fontSize = 10
+
+        console.log(receiverSignature)
+
+        //canvas.width = width
+        //canvas.height = height
+
+        canvas.width = width * scale
+        canvas.height = height * scale
+
+        //canvas.style.width = width * 4
+        //canvas.style.height = height * 4
 
         const ctx = canvas.getContext('2d')
+        // This supposedly makes the lines and text less blurry
+        // See: https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
+        ctx.translate(0.5, 0.5)
+
+        // This also should make the lines and text less blurry
+        ctx.textRendering = "geometricPrecision"
 
         const date = new Date()
         const dateString = date.toLocaleDateString('de-DE')
 
-    const signatureLength = 100
+        const signatureLength = 100 * scale
 
         ctx.beginPath()
 
-    ctx.moveTo(30, 10)
+        ctx.moveTo(30 * scale, 10 * scale)
-    ctx.lineTo(signatureLength, 10)
+        ctx.lineTo(signatureLength, 10 * scale)
 
-    ctx.moveTo(30, 10)
+        ctx.moveTo(30 * scale, 10 * scale)
-    ctx.arcTo(10, 10, 10, 30, 20)
+        ctx.arcTo(10 * scale, 10 * scale, 10 * scale, 30 * scale, 20 * scale)
 
-    ctx.moveTo(10, 30)
+        ctx.moveTo(10 * scale, 30 * scale)
-    ctx.arcTo(10, 50, 30, 50, 20)
+        ctx.arcTo(10 * scale, 50 * scale, 30 * scale, 50 * scale, 20 * scale)
 
-    ctx.moveTo(30, 50)
+        ctx.moveTo(30 * scale, 50 * scale)
-    ctx.lineTo(signatureLength, 50)
+        ctx.lineTo(signatureLength, 50 * scale)
 
         ctx.strokeStyle = 'darkblue'
         ctx.stroke()
 
         ctx.fillStyle = 'black'
-    ctx.font = '10px serif'
+        ctx.font = `${fontSize * scale}px sans-serif`
-    ctx.fillText('Signed by', 30, 10)
+        ctx.fillText('Signed by', 30 * scale, 10 * scale)
-    ctx.fillText(receiverName + ', ' + dateString, 15, 60)
+        ctx.fillText(receiverName + ', ' + dateString, 15 * scale, 60 * scale)
 
         return new Promise((resolve) => {
             canvas.toBlob((blob) => {

EnvelopeGenerator.Web/wwwroot/js/app.js

@@ -108,13 +108,19 @@ class App {
         const isSignature = !!annotation.isSignature
 
         if (isFormField === false && isSignature === true) {
+
             const left = annotation.boundingBox.left - 25
             const top = annotation.boundingBox.top - 25
             const width = 150
             const height = 75
 
+            console.log(createdAnnotations)
+
+            console.log(annotation)
+
             const imageUrl = await this.Annotation.createAnnotationFrameBlob(
                 this.currentReceiver.name,
+                this.currentReceiver.signature,
                 width,
                 height
             )