Pressure-sensitive signature drawing for Vue 2 and 3 built on top of perfect-freehand.


yarn add v-perfect-signature


  <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.


Name Type Default Description
onBegin Function - Fired when stroke begin
onEnd Function - Fired when stroke end