Close Menu
SalesforceCodex
    Facebook X (Twitter) Instagram
    Trending
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    • How to Suppress PMD Warnings in Salesforce Apex
    • Top 10 PMD Issues Salesforce Developers Should Focus on in Apex
    • How to Use Graph API for Outlook-Salesforce Connection
    • Enhancing Performance with File Compression in Apex
    Facebook X (Twitter) Instagram
    SalesforceCodex
    Subscribe
    Tuesday, May 20
    • Home
    • Architecture
    • Salesforce
      • News
      • Apex
      • Integration
      • Books Testimonial
    • Questions
    • Certification
      • How to Prepare for Salesforce Integration Architect Exam
      • Certification Coupons
    • Integration Posts
    • Downloads
    • About Us
      • Privacy Policy
    SalesforceCodex
    Home»Salesforce»Apex»Generate and Create Signature in LWC

    Generate and Create Signature in LWC

    Dhanik Lal SahniBy Dhanik Lal SahniOctober 5, 20214 Comments3 Mins Read
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    Generate and Create Signature in LWC
    Share
    Facebook Twitter LinkedIn Pinterest Email

    Capturing signature is very important for many business use cases specifically for Salesforce community portals where we get agreement signed by customers. There are many contract management application available for this in AppExchange , in this post we will generate and create signature in LWC.

    I have already posted a article long back which is for lightning aura component for similar functionality. You can check blog Create Signature Pad in Salesforce Lightning, if you are looking for aura version.

    For creating signature component in LWC, I have added two use cases in this blog, generating signature using some custom signature font and creating our signature manually. let us how to create a LWC which will handle both use cases.

    Steps for creating LWC

    1. Download and Upload custom font
    2. Create LWC for generating Signature
    3. Create Apex class to upload signature
    4. Add functionality to capturing Signature in LWC
    5. Test LWC

    1. Download and Upload custom font

    To generate signatures, we can use custom fonts like GreatVibes-Regular or Southam Demo. To use these custom font, we can download it and upload them in static resources.

    For this blog, I have used GreatVibes-Regular and upload in static resource as signature. You can put all font files in one folder and zip it with name signature

    2. Create LWC for generating Signature

    After custom font uploaded in static resource, we can use this to generate signature automatically for given text. Let use create LWC component signatureCanvas to generate and create signature. In this step let us code for generating signature using font.

    @font-face {
        font-family: 'GreatVibes-Regular'; 
        src: url('../../resource/signature/GreatVibes-Regular.ttf');
        font-weight: normal;
        font-style: normal;
    }

    Add css class in LWC component and add above style code to load font for component. Give resource path based on your uploaded content. In my case signature is static resource name and GreatVibes-Regular.ttf is font filename.

    Now we have to generate signature text using above font, for this use below code. Below event handler code will use custom font while writing text. fillText function will add text on canvas.

    signIt(e)
    {
            var signText = e.detail.value;
            this.fileName=signText;
            ctx.font = "30px GreatVibes-Regular";
            this.handleClearClick(e);
            ctx.fillText(signText, 30, canvasElement.height/2);
    }

    We can download generated signature also. To download below code will be used,

    var link = document.createElement('a');
    link.download = '.jpg';
    link.href = dataURL;
    link.click();

    This code will downloads as JPEG format. For other format, change format in above code.

    3. Create Apex class to upload signature

    Create a apex class which will upload signature in salesforce record attachement. It will store attachment in Salesforce files.

    4. Add functionality to capturing Signature in LWC

    User can sign manually also so let us add functionality to create signature in this component.

    User can sign on canvas, so we have to draw text on canvas using path and strokes method. stroke method draw a path or shape. Path methods like moveTo , LineTo help in creating some shape.

    I have created one API property in JS to add header text on signature panel. based on your requirement, add/remove properties.

    Complete LWC Code:

    5. Test LWC

    LWC component is ready to test now, we can use it in lightning record page. Add this component using lightning page builder.

    References:

    HTML Canvas

    Create Signature Pad in Salesforce Lightning

    files lightning Lightning web component salesforce file signature in lwc Signature Pad
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Previous ArticleOption Group in LWC Select
    Next Article HeatMap Chart In LWC
    Dhanik Lal Sahni
    • Website
    • Facebook
    • X (Twitter)

    With over 18 years of experience in web-based application development, I specialize in Salesforce technology and its ecosystem. My journey has equipped me with expertise in a diverse range of technologies including .NET, .NET Core, MS Dynamics CRM, Azure, Oracle, and SQL Server. I am dedicated to staying at the forefront of technological advancements and continuously researching new developments in the Salesforce realm. My focus remains on leveraging technology to create innovative solutions that drive business success.

    Related Posts

    By Dhanik Lal Sahni6 Mins Read

    Top 10 Salesforce Flow Features of Salesforce Summer ’25

    May 11, 2025
    By Dhanik Lal Sahni6 Mins Read

    Unlock the Power of Vibe Coding in Salesforce

    April 30, 2025
    By Dhanik Lal Sahni5 Mins Read

    How to Implement Dynamic Queueable Chaining in Salesforce Apex

    April 21, 2025
    View 4 Comments

    4 Comments

    1. HimanshuGt90 on October 16, 2022 2:12 pm

      Hi Dhanik,
      Thanks for providing solution.
      I think we need to check coordinates in different way like eventParam.touches[0].clientX and eventParam.touches[0].clientY for touch screens.

      Reply
      • Dhanik Lal Sahni on October 17, 2022 9:40 pm

        Yes, You have to get the correct index for getting data between that area. You can also try https://salesforcecodex.com/salesforce/named-entity-recognition-using-salesforce-einstein-api/ if your document support named entity.

        Thank You,
        Dhanik

        Reply
    2. Purna on April 15, 2024 8:15 pm

      Hi Dhanik,
      Thanks for providing solution but it’s not working for small and medium devises like phone and Ipad. Could you share the updated code version for this?

      Reply
      • Dhanik Lal Sahni on April 15, 2024 8:54 pm

        Hello Purna,
        Please share, What issue you are facing in small and medium devises?

        Thank You,
        Dhanik

        Reply
    Leave A Reply Cancel Reply

    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    • How to Suppress PMD Warnings in Salesforce Apex
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • How to Connect Excel to Salesforce to Manage Your Data and Metadata February 9, 2025
    • Difference Between With Security and Without Security in Apex January 2, 2025
    • Top Reasons to Love Salesforce Trailhead: A Comprehensive Guide December 5, 2024
    • How to Utilize Apex Properties in Salesforce November 3, 2024
    • How to Choose Between SOQL and SOSL Queries July 31, 2024
    Archives
    Categories
    Tags
    apex (110) apex code best practice (8) apex rest (11) apex trigger best practices (4) architecture (22) Asynchronous apex (9) AWS (5) batch apex (9) batch processing (4) code optimization (8) code review tools (3) custom metadata types (5) design principle (9) einstein (3) flow (15) future method (4) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (64) lightning-combobox (5) lightning-datatable (10) lightning component (29) Lightning web component (61) lwc (50) named credential (8) news (4) optimize apex (3) optimize apex code (4) Permission set (4) Queueable (9) rest api (23) S3 Server (4) salesforce (140) salesforce apex (46) salesforce api (4) salesforce api integration (5) Salesforce Interview Question (4) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    Ranked #1 SALESFORCE DEVELOPER BLOG BY SALESFORCEBEN.COM
    Featured on Top Salesforce Developer Blog By ApexHours
    Recent Posts
    • Top 10 Salesforce Flow Features of Salesforce Summer ’25
    • Unlock the Power of Vibe Coding in Salesforce
    • How to Implement Dynamic Queueable Chaining in Salesforce Apex
    • How to Implement Basic Queueable Chaining in Salesforce Apex
    • How to Suppress PMD Warnings in Salesforce Apex
    Ranked in Top Salesforce Blog by feedspot.com
    RSS Recent Stories
    • How to Connect Excel to Salesforce to Manage Your Data and Metadata February 9, 2025
    • Difference Between With Security and Without Security in Apex January 2, 2025
    • Top Reasons to Love Salesforce Trailhead: A Comprehensive Guide December 5, 2024
    • How to Utilize Apex Properties in Salesforce November 3, 2024
    • How to Choose Between SOQL and SOSL Queries July 31, 2024
    Archives
    Categories
    Tags
    apex (110) apex code best practice (8) apex rest (11) apex trigger best practices (4) architecture (22) Asynchronous apex (9) AWS (5) batch apex (9) batch processing (4) code optimization (8) code review tools (3) custom metadata types (5) design principle (9) einstein (3) flow (15) future method (4) google (6) google api (4) integration (19) integration architecture (6) lighting (8) lightning (64) lightning-combobox (5) lightning-datatable (10) lightning component (29) Lightning web component (61) lwc (50) named credential (8) news (4) optimize apex (3) optimize apex code (4) Permission set (4) Queueable (9) rest api (23) S3 Server (4) salesforce (140) salesforce apex (46) salesforce api (4) salesforce api integration (5) Salesforce Interview Question (4) salesforce news (5) salesforce question (5) solid (6) tooling api (5) Winter 20 (8)

    Get our newsletter

    Want the latest from our blog straight to your inbox? Chucks us your detail and get mail when new post is published.
    * indicates required

    Facebook X (Twitter) Instagram Pinterest YouTube Tumblr LinkedIn Reddit Telegram
    © 2025 SalesforceCodex.com. Designed by Vagmine Cloud Solution.

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Our website is made possible by displaying online advertisements to our visitors. Please support us by disabling your Ad Blocker.