Blog Detail


Pressure Sensitive Signature Drawing for Vue 2 and 3  cover image

arrow_back Pressure Sensitive Signature Drawing for Vue 2 and 3

Robert Soriano introduced a Pressure-sensitive signature drawing for Vue 2 and Vue 3 built on top of perfect-freehand. V perfect signature allows you to draw your signature effortlessly. It also provides many customizable options like font size, stroke thining, pen color, etc. You can view its demo here.


You can install this package via npm or yarn.


npm i v-perfect-signature


yarn add v-perfect-signature


After the installation, you can import this package into your vue component.

  <VPerfectSignature :stroke-options="strokeOptions" ref="signaturePad" />

<script lang="ts">
import Vue from 'vue'
import VPerfectSignature, { StrokeOptions } from 'v-perfect-signature'

export default Vue.extend({
  components: {
  data: () => ({
    strokeOptions: {
        size: 16,
        thinning: 0.75,
        smoothing: 0.5,
        streamline: 0.5
    } as StrokeOptions
  methods: {
    toDataURL() {
        const dataURL = this.$refs.signaturePad.toDataURL()


Name Type Default Description
width String 100% Set canvas width
height String 100% Set canvas height
backgroundColor String rgba(0,0,0,0) Canvas background color
penColor String #000 Canvas pen color
strokeOptions Object Reference Perfect freehand options


Name Argument Type Description
toDataURL(type) String Returns signature image as data URL
fromDataURL(dataUri) String Draws signature image from data URL
toData - Returns signature image as an array of array of input points
fromData(data) Array Draws signature image from array of array of input points
clear() - Clears the canvas
isEmpty() - Returns true if canvas is empty
resizeCanvas(shouldClear) Boolean Resizes and recalculate dimensions

Note: Like signature_pad, fromDataURL does not populate internal data structure. Thus, after using fromDataURL, toData won’t work properly.

If you want to utilize this package you can visit its full documentation on github.

Published at : 13-09-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project