Implement Signature Pad in Ionic 5 apps 
Tags: angular, ionic, signature, cordova
Published: 2020-08-16 11:40:42

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_8" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…"><section name="8633" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="5cfd" class="graf graf--p graf-after--figure">You might have seen the delivery guys taking your signature on the phone, or someone scribbling their handwriting on their phone. It looks pretty cool, and in this post, you’ll <strong class="markup--strong markup--p-strong">learn how to integrate a Signature pad functionality in Ionic 5 apps and PWA.</strong></p><p name="c5b4" class="graf graf--p graf-after--p">By signing on your phone you can do (among many) following things</p><ul class="postList"><li name="08d6" class="graf graf--li graf-after--p">Sign on a document and email/share</li><li name="047e" class="graf graf--li graf-after--li">Scribble your signature and save as an image for later</li><li name="c6f2" class="graf graf--li graf-after--li">Get signature from a user on delivery / trip completion etc.</li></ul><figure tabindex="0" contenteditable="false" name="9577" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.2%;"></div><img class="graf-image" data-image-id="0*b30rIyxEZ_yB_rZe.png" data-width="1400" data-height="787" alt="Getting hand signature on phone is a major addition to your app’s authenticity" src="https://cdn-images-1.medium.com/max/800/0*b30rIyxEZ_yB_rZe.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Getting hand signature on phone is a major addition to your app’s authenticity</figcaption></figure><p name="98c0" class="graf graf--p graf-after--figure">We’ll implement this functionality in an Ionic 5 Angular Cordova app. We will learn how to sign on the phone and then save the signature in phone’s gallery as a png.</p><h3 name="9266" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;?</h3><p name="fd29" class="graf graf--p graf-after--h3">(Just for the sake of beginners)&nbsp;<br><strong class="markup--strong markup--p-strong">Ionic</strong> is a hybrid mobile app development SDK. It provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging <a href="https://cordova.apache.org/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener"    target="_blank">Cordova</a> or Capacitor environment.</p><p name="11c8" class="graf graf--p graf-after--p">So, in other words&#8202;—&#8202;If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. <strong class="markup--strong markup--p-strong">With Ionic you can write a single piece of code for your app that can run on both iOS and Android </strong>and web (as PWA), that too with the simplicity of HTML, CSS, and JS.</p><h3 name="5d4a" class="graf graf--h3 graf-after--p">Signature Pad functionality</h3><p name="e2bd" class="graf graf--p graf-after--h3">Scribbling signature pad is not at all different from writing on an image, which we all do regularly in our Whatsapp, Facebook etc. image shares. Essentially, we create a Canvas in the app, and let the user draw on the Canvas.</p><p name="918f" class="graf graf--p graf-after--p">Canvas is a very powerful tool in HTML/Javascript. You can draw/scribble on a designated area, resize it, change colors, put a picture in background and write on it etc. Canvas can even cater to PDF and other files, but we’ll stick to images for this post.</p><p name="0255" class="graf graf--p graf-after--p">Due to Ionic being platform agnostic, there are different types of Ionic Apps you can build for same functionality. Most popular ones are&nbsp;:</p><ul class="postList"><li name="698d" class="graf graf--li graf-after--p"><strong class="markup--strong markup--li-strong">Front-end: Angular | Build environment&nbsp;: Cordova ✅</strong></li><li name="7e52" class="graf graf--li graf-after--li">Front-end: Angular | Build environment&nbsp;: Capacitor</li><li name="91e6" class="graf graf--li graf-after--li">Front-end: React | Build environment&nbsp;: Capacitor</li><li name="d349" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Front-end: React/Angular | as PWA ✅</strong></li></ul><p name="78a3" class="graf graf--p graf-after--li">Canvas can be implemented in any of the above, but for our example I’m choosing Angular Cordova framework. Besides having dedicated plugins for a lot of integrations, Cordova also has a huge community backing.</p><p name="1146" class="graf graf--p graf-after--p">We’ll implement the Signature functionality in both PWA and apps.</p><h3 name="7113" class="graf graf--h3 graf-after--p">Structure of&nbsp;post</h3><p name="3b3a" class="graf graf--p graf-after--h3">As always, I’ll go step-by-step in the post. If you are an experienced dev, you can just skip over the known stuff and jump to the section you need</p><p name="1071" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 1</strong>&#8202;—&#8202;Creating a basic Ionic 5 Angular app</p><p name="aeac" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 2</strong>— Install required plugins</p><p name="901c" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 3</strong>— Implement Signature pad functionality on web</p><p name="f4e2" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 4</strong>— Save the created signatures in Android gallery</p><p name="286d" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Step 5</strong>— Test on Android</p><p name="2410" class="graf graf--p graf-after--p">Let’s dive right in&nbsp;!</p><figure tabindex="0" contenteditable="false" name="3a81" class="graf graf--figure graf-after--p graf--trailing"><div class="aspectRatioPlaceholder is-locked" style="max-width: 320px; max-height: 240px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 75%;"></div><img class="graf-image" data-image-id="1*hRj3iNulVXYHcu6wHkeMeg.gif" data-width="320" data-height="240" src="https://cdn-images-1.medium.com/max/800/1*hRj3iNulVXYHcu6wHkeMeg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Dive&nbsp;……&nbsp;better</figcaption></figure></div></div></section><section name="c2ff" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="9f81" class="graf graf--h3 graf--leading">Step 1— Create a basic Ionic Angular&nbsp;app</h3><p name="6470" class="graf graf--p graf-after--h3">First you need to make sure you have the latest Ionic CLI. This will ensure you are using everything latest. Ensure latest Ionic CLI installation using</p><pre name="e081" class="graf graf--pre graf-after--p">$ npm install -g ionic@latest</pre><p name="5ac8" class="graf graf--p graf-after--pre">(My node version at the time of writing the blog is 12.14.0)</p><p name="2a7b" class="graf graf--p graf-after--p">Creating a basic Ionic-Angular app. Start a basic <code class="markup--code markup--p-code">tabs</code> starter using</p><pre name="250d" class="graf graf--pre graf-after--p">$ ionic start ionicSign tabs --type=angular --cordova</pre><p name="d16b" class="graf graf--p graf-after--pre">The <code class="markup--code markup--p-code">--type=angular</code> told the CLI to create an <strong class="markup--strong markup--p-strong">Angular</strong> app, not a <strong class="markup--strong markup--p-strong">React</strong> app&nbsp;!!</p><p name="06f2" class="graf graf--p graf-after--p">Run the app in browser using</p><pre name="2d3b" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="726e" class="graf graf--p graf-after--pre">You won’t see much in the homepage created in the starter. I have modified the homepage a little to test our Signature functionality. To make wider space for signatures, I have kept the orientation landscape.</p><p name="579a" class="graf graf--p graf-after--p">My homepage looks like this</p><figure tabindex="0" contenteditable="false" name="b5a9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 333px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 47.5%;"></div><img class="graf-image" data-image-id="1*5ik6dhdryt9-LZVAxSyvzg.png" data-width="810" data-height="385" alt="Basic UI to test Signature pad functionality in Ionic 5" src="https://cdn-images-1.medium.com/max/800/1*5ik6dhdryt9-LZVAxSyvzg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Basic UI to test Signature pad functionality in Ionic&nbsp;5</figcaption></figure><blockquote name="cbcb" class="graf graf--blockquote graf-after--figure">HTML code for <code class="markup--code markup--blockquote-code">tab1.page.html</code> is given in Step 3</blockquote><h3 name="a1fc" class="graf graf--h3 graf-after--blockquote"><strong class="markup--strong markup--h3-strong">Step 2</strong>&#8202;—&#8202;Install required&nbsp;plugins</h3><h4 name="123a" class="graf graf--h4 graf-after--h3"><a href="https://www.npmjs.com/package/signature_pad"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">Signature Pad npm&nbsp;package</a></h4><p name="a63b" class="graf graf--p graf-after--h4">We’ll use the Javascript <code class="markup--code markup--p-code">signature_pad</code> package for our functionality. Over the years, many angular and ionic plugins have used this package to create signature pad plugins, but at the time of this post none of them is actively maintained. So it is better to use the core package itself.</p><pre name="3a2c" class="graf graf--pre graf-after--p">$ npm install --save signature_pad</pre><p name="1141" class="graf graf--p graf-after--pre">Import the plugin in your <code class="markup--code markup--p-code">tab1.page.ts</code></p><pre name="7148" class="graf graf--pre graf-after--p">import SignaturePad from 'signature_pad';</pre><p name="2447" class="graf graf--p graf-after--pre">In <code class="markup--code markup--p-code">tab1.page.html</code>&nbsp;, we’ll create a <code class="markup--code markup--p-code">canvas</code> element,</p><pre name="4d36" class="graf graf--pre graf-after--p">&lt;canvas class="signature-pad-canvas" #canvas width="900" height="400" style="touch-action: none;"&gt;&lt;/canvas&gt;</pre><p name="8901" class="graf graf--p graf-after--pre">which can then be referenced in the JS file with</p><pre name="19c2" class="graf graf--pre graf-after--p">export class Tab1Page implements OnInit, AfterViewInit {</pre><pre name="dced" class="graf graf--pre graf-after--pre">@ViewChild('canvas', { static: true }) signaturePadElement;<br>.....</pre><p name="db90" class="graf graf--p graf-after--pre">The signature pad is rendered with</p><pre name="5b1d" class="graf graf--pre graf-after--p">this.signaturePad = new SignaturePad(this.signaturePadElement.nativeElement);</pre><h4 name="9a5f" class="graf graf--h4 graf-after--pre"><a href="https://ionicframework.com/docs/native/base64-to-gallery"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">Base64toGallery Plugin</a></h4><p name="1532" class="graf graf--p graf-after--h4">Our Canvas signature pad will output the signature in png format, but in base64 encoding. To save this in phone’s gallery, we can either</p><ul class="postList"><li name="c1f1" class="graf graf--li graf-after--p">Save the base64 data as a blob using FileWrite (you can use it in PWA), OR</li><li name="2816" class="graf graf--li graf-after--li">Use base64toGallery Ionic Native Plugin, which does the above for us in an easier fashion</li></ul><p name="9a05" class="graf graf--p graf-after--li">Install the plugin using</p><pre name="2e1f" class="graf graf--pre graf-after--p">$ ionic cordova plugin add cordova-base64-to-gallery</pre><pre name="ea89" class="graf graf--pre graf-after--pre">$ npm install @ionic-native/base64-to-gallery</pre><p name="a7c3" class="graf graf--p graf-after--pre">Import the plugin in <code class="markup--code markup--p-code">app.module.ts</code></p><pre name="95af" class="graf graf--pre graf-after--p">import { Base64ToGallery } from '@ionic-native/base64-to-gallery/ngx';</pre><pre name="9e0d" class="graf graf--pre graf-after--pre">@NgModule({<br> ...<br> providers: [<br>  ...<br>  Base64ToGallery,<br>  ...<br>})</pre><p name="e718" class="graf graf--p graf-after--pre">Import the plugin in <code class="markup--code markup--p-code">tab1.page.ts</code></p><pre name="63fc" class="graf graf--pre graf-after--p">import { Base64ToGallery } from '@ionic-native/base64-to-gallery/ngx';</pre><pre name="9510" class="graf graf--pre graf-after--pre">constructor(private base64ToGallery: Base64ToGallery){}</pre><h4 name="10e4" class="graf graf--h4 graf-after--pre"><a href="https://ionicframework.com/docs/native/android-permissions"  class="markup--anchor markup--h4-anchor" rel="noopener"    target="_blank">Android Permissions Plugin</a></h4><p name="e848" class="graf graf--p graf-after--h4">To save images in Android gallery, you need permission to read/write external storage. Android Permissions plugin will help ask the user for permissions. Install the plugin using</p><pre name="f264" class="graf graf--pre graf-after--p">$ ionic cordova plugin add cordova-plugin-android-permissions</pre><pre name="5223" class="graf graf--pre graf-after--pre">$ npm install @ionic-native/android-permissions</pre><p name="e8b9" class="graf graf--p graf-after--pre">Import the plugin in <code class="markup--code markup--p-code">app.module.ts</code></p><pre name="95b1" class="graf graf--pre graf-after--p">import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';</pre><pre name="a472" class="graf graf--pre graf-after--pre">@NgModule({<br> ...<br> providers: [<br>  ...<br>  AndroidPermissions,<br>  ...<br>})</pre><p name="6bc2" class="graf graf--p graf-after--pre">Import the plugin in <code class="markup--code markup--p-code">tab1.page.ts</code></p><pre name="62ef" class="graf graf--pre graf-after--p">import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';</pre><pre name="fdad" class="graf graf--pre graf-after--pre">constructor(private androidPermissions: AndroidPermissions){}</pre><h3 name="0772" class="graf graf--h3 graf-after--pre"><strong class="markup--strong markup--h3-strong">Step 3</strong>&#8202;—&#8202;Implement Signature pad functionality</h3><p name="053d" class="graf graf--p graf-after--h3">Following the above steps, you’ll have a canvas where you can scribble. Here’s the code for <code class="markup--code markup--p-code">tab1.page.html</code> and <code class="markup--code markup--p-code">tab1.page.ts</code>&nbsp;. We’ll go walk through the code step by step</p><h4 name="5311" class="graf graf--h4 graf-after--p">tab1.page.html</h4><figure tabindex="0" contenteditable="false" name="d2af" class="graf graf--figure graf--iframe is-defaultValue graf-after--h4"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 91.714%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/f1976660594bc9c6f86cf1d1e64c386d %}</div></div></figure><h4 name="1ea2" class="graf graf--h4 graf-after--figure">tab1.page.ts</h4><figure tabindex="0" contenteditable="false" name="3fe1" class="graf graf--figure graf--iframe is-defaultValue graf-after--h4"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 220.714%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/eb7beede88f910d4c692c27d35f46b28 %}</div></div></figure><ul class="postList"><li name="0f3c" class="graf graf--li graf-after--figure">First, we referenced the <code class="markup--code markup--li-code">canvas</code> element from the HTML as <code class="markup--code markup--li-code">signaturePadElement</code>, using <code class="markup--code markup--li-code">@ViewChild</code></li><li name="f173" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">init()</strong>&#8202;—&#8202;In this function, we are setting <code class="markup--code markup--li-code">width</code> and <code class="markup--code markup--li-code">height</code> for the signature pad area. This is called on page load, as well as on each window resize</li><li name="7fe9" class="graf graf--li graf-after--li">In <code class="markup--code markup--li-code">ngAfterViewInit</code>&nbsp;, we create the SignaturePad and set the pen color to a specific <strong class="markup--strong markup--li-strong">RGB</strong> value. At this point, you can start scribbling text or your signature on the screen</li><li name="90cf" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">clear()&#8202;</strong>—&#8202;method clears the canvas of all content</li><li name="9f99" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">undo()</strong>&#8202;—&#8202;method clears out the very last stroke from the canvas</li><li name="abac" class="graf graf--li graf-after--li">In the <strong class="markup--strong markup--li-strong">save()</strong> method, we use <code class="markup--code markup--li-code">toDataURL()</code> This method outputs the canvas content as an image in base64 encoded data. You can then go ahead and save this in gallery using <strong class="markup--strong markup--li-strong">base64ToGallery </strong>plugin’s <code class="markup--code markup--li-code">base64ToGallery</code> method</li></ul><blockquote name="c570" class="graf graf--blockquote graf-after--li"><strong class="markup--strong markup--blockquote-strong">Note</strong>&nbsp;: <code class="markup--code markup--blockquote-code">toDataURL()</code> method outputs <strong class="markup--strong markup--blockquote-strong">PNG </strong>format as default. You can give <code class="markup--code markup--blockquote-code">image/jpeg</code> as an argument to get JPEG data as well. However, the <code class="markup--code markup--blockquote-code">base64ToGallery</code> plugin is explicitly coded only to handle PNG data. Hence, if you try to save JPEG data from the canvas, the data will not be saved.</blockquote><p name="2b4d" class="graf graf--p graf-after--blockquote">Here’s how the signature pad works</p><figure tabindex="0" contenteditable="false" name="7289" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 329px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 47%;"></div><img class="graf-image" data-image-id="1*nRjryzhWEUgsV_PNovbEow.gif" data-width="806" data-height="379" alt="Signature Pad functionality in Ionic 5" src="https://cdn-images-1.medium.com/max/800/1*nRjryzhWEUgsV_PNovbEow.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Signature Pad functionality in Ionic&nbsp;5</figcaption></figure><p name="645f" class="graf graf--p graf-after--figure">So we have our own signature pad functionality built in Ionic 5 web app, with Undo and Clear functionalities.</p><p name="b4c7" class="graf graf--p graf-after--p">The <strong class="markup--strong markup--p-strong">Save() </strong>method will not work on <code class="markup--code markup--p-code">ionic serve</code> as it is dependent on a Cordova plugin. Once you build the app in Android (<strong class="markup--strong markup--p-strong">Step 5</strong>)&nbsp;, when you try to save the signature in gallery, you’ll see an error</p><pre name="7814" class="graf graf--pre graf-after--p">error in saving image</pre><p name="ea5d" class="graf graf--p graf-after--pre">(Well&nbsp;! that’s very informative&nbsp;!!)</p><p name="5855" class="graf graf--p graf-after--p">This happens because we don’t have enough permission to write to the device’s storage.</p><h3 name="e8c9" class="graf graf--h3 graf-after--p"><strong class="markup--strong markup--h3-strong">Step 4</strong>&#8202;—&#8202;Save signatures in Android&nbsp;gallery</h3><p name="a023" class="graf graf--p graf-after--h3">To get permission to write on device’s storage, we’ll use Android Permissions plugin. Install and import the plugin as shown in Step 2. After that, add/modify the following in your <code class="markup--code markup--p-code">tab1.page.ts</code> file</p><figure tabindex="0" contenteditable="false" name="cc3b" class="graf graf--figure graf--iframe is-defaultValue graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 135.857%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/1f60f740f2e996526169675ba259e638 %}</div></div></figure><p name="f4c5" class="graf graf--p graf-after--figure">The <strong class="markup--strong markup--p-strong">save() </strong>function now first checks if the app has permission to save on device storage. If not, it calls <strong class="markup--strong markup--p-strong">requestPermissions </strong>function&nbsp;, where the app requests a permission using a user prompt.</p><p name="8bb4" class="graf graf--p graf-after--p">Once the permission is granted, the image is saved in device’s gallery. 🎉</p><blockquote name="caae" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">The Gotcha</strong>: If you’re keeping your signature pen color black, and saving image in gallery, make sure you gallery’s background color is not black. If it is, you won’t see anything but black in the image in gallery, because it is a PNG with transparency. Similar result for other color match.</blockquote><figure tabindex="0" contenteditable="false" name="1f01" class="graf graf--figure graf-after--blockquote"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 323px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.2%;"></div><img class="graf-image" data-image-id="1*9Rqc9AQd5klN_0nZd7vNPg.jpeg" data-width="2340" data-height="1080" alt="Request permission to save image in gallery" src="https://cdn-images-1.medium.com/max/800/1*9Rqc9AQd5klN_0nZd7vNPg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Request permission to save image in&nbsp;gallery</figcaption></figure><h3 name="1a2a" class="graf graf--h3 graf-after--figure">Step 5&#8202;—&#8202;Test in&nbsp;Android</h3><p name="c67d" class="graf graf--p graf-after--h3">If you haven’t already, build the app for a test run in Android using</p><pre name="1394" class="graf graf--pre graf-after--p">$ ionic cordova platform add android</pre><pre name="1a9a" class="graf graf--pre graf-after--pre">$ ionic cordova run android</pre><p name="6a7e" class="graf graf--p graf-after--pre">This will build and run the app in your default emulator or a connected device.</p><p name="f091" class="graf graf--p graf-after--p">Remember, you can test the ‘Save to gallery’ functionality only on a device.</p><p name="6bcb" class="graf graf--p graf-after--p">Here’s how the app functions in an android device</p><figure tabindex="0" contenteditable="false" name="a44d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 337px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 48.1%;"></div><img class="graf-image" data-image-id="1*t5ObWVdx2TeYyLsqbDxdlg.gif" data-width="702" data-height="338" alt="Signature Pad functionality in Ionic 5 App&#8202;—&#8202;Android Test" src="https://cdn-images-1.medium.com/max/800/1*t5ObWVdx2TeYyLsqbDxdlg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Signature Pad functionality in Ionic 5 App&#8202;—&#8202;Android&nbsp;Test</figcaption></figure><p name="666f" class="graf graf--p graf-after--figure">Congrats&nbsp;! you just learnt how to sign in an Ionic 5 app, and save it in the gallery as PNG.</p><h3 name="1b9a" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="2464" class="graf graf--p graf-after--h3">This post describes how to implement a signature pad functionality in Ionic 5 apps and PWA. You can save these signatures as PNG and use those at a later time. You can also load any image in the <code class="markup--code markup--p-code">canvas</code> and mark/write over the image. This can work on PDF content as well, but that is for a later post.</p><p name="2c9d" class="graf graf--p graf-after--p graf--trailing">Happy Coding&nbsp;!</p></div></div></section><section name="2375" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="39a6" class="graf graf--h3 graf--leading is-selected">Next Steps</h3><p name="01b7" class="graf graf--p graf-after--h3">If you liked this blog, you will also find the following blogs interesting and helpful. Feel free to ask any questions in the comment section</p><ul class="postList"><li name="1a12" class="graf graf--li graf-after--p">Ionic Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">RazorPay</a></li><li name="9210" class="graf graf--li graf-after--li">Ionic Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Chart.js</a></li><li name="e50b" class="graf graf--li graf-after--li">Ionic Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Twitter</a></li><li name="ce2c" class="graf graf--li graf-after--li">Ionic Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Anonymous</a></li><li name="7bd1" class="graf graf--li graf-after--li">Ionic Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Pedometer</a>| <a href="https://enappd.com/blog/implement-signature-pad-in-ionic-apps/145/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Signature Pad</a></li><li name="bba3" class="graf graf--li graf-after--li">Media in Ionic&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Image Cropper</a></li><li name="ca53" class="graf graf--li graf-after--li">Ionic Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">RTL</a></li><li name="b3a4" class="graf graf--li graf-after--li">Ionic messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Reading SMS</a></li><li name="1cc4" class="graf graf--li graf-after--li graf--trailing">Ionic with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener noopener"    target="_blank">Cloud functions</a></li></ul></div></div></section><section name="5071" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="ad14" class="graf graf--h3 graf--leading">Ionic React Full App with Capacitor</h3><p name="4fa5" class="graf graf--p graf-after--h3">If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-react-full-app-capacitor/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 5 React Full App in Capacitor</a></p><figure tabindex="0" contenteditable="false" name="0d2d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 441px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63%;"></div><img class="graf-image" data-image-id="1*G3yOFVX4oABx9MhUy-3kng.png" data-width="760" data-height="479" alt="Ionic 5 React Full App in Capacitor from Enappd" src="https://cdn-images-1.medium.com/max/800/1*G3yOFVX4oABx9MhUy-3kng.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 5 React Full App in Capacitor from&nbsp;Enappd</figcaption></figure><h3 name="30ba" class="graf graf--h3 graf-after--figure">Ionic Capacitor Full App (Angular)</h3><p name="9a60" class="graf graf--p graf-after--h3">If you need a base to start your next Angular <strong class="markup--strong markup--p-strong">Capacitor app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/capacitor-full-app-with-ionic-angular/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener noopener"    target="_blank">Capacitor Full App</a></p><figure tabindex="0" contenteditable="false" name="c219" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 761px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 108.7%;"></div><img class="graf-image" data-image-id="0*UwSHcofTMStMnzAX.png" data-width="736" data-height="800" alt="Capacitor Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/0*UwSHcofTMStMnzAX.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Capacitor Full App with huge number of layouts and&nbsp;features</figcaption></figure><h3 name="2f1c" class="graf graf--h3 graf-after--figure">Ionic Full App (Angular and&nbsp;Cordova)</h3><p name="1008" class="graf graf--p graf-after--h3">If you need a base to start your next Ionic 5 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 5 Full App</a></p><figure tabindex="0" contenteditable="false" name="16d6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.1%;"></div><img class="graf-image" data-image-id="0*1ArpKyhiDHZnevwB.jpeg" data-width="700" data-height="442" alt="Ionic Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/0*1ArpKyhiDHZnevwB.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic Full App in Cordova, with huge number of layouts and&nbsp;features</figcaption></figure><p name="7205" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>