unable to draw with pen

[bilalswiftsolutions]

canvas is taking area on screen but not drawing anything when i am moving mouse on it. my vue version is 3 . and i am using it in ioic

[laravelteacher]

I have to See your codeShow me thatارسال از تلفن همراه Huawei من-------- پیام اصلی --------موضوع: [Alirezamosavi/vue-signature] unable to draw with pen (#1)فرستنده: Bilal Arshad گیرنده: Alirezamosavi/vue-signature گیرنده کپی: Subscribed canvas is taking area on screen but not drawing anything when i am moving mouse on it. my vue version is 3 . and i am using it in ioic

—You are receiving this because you are subscribed to this thread.Reply to this email directly, view it on GitHub, or unsubscribe.

[bilalswiftsolutions]

I am using https://github.com/szimek/signature_pad for signatures in my app. i installed it and used it signature pad is taking area on screen but i am unable to draw anything on it. i am using it with vue js ionic for mobile app

that how I am trying

   <div >
     <canvas id="signature-pad" class="signature-pad" width="640" height="480"></canvas>
    </div>

script

import SignaturePad from 'signature_pad'
async mounted() {

    var canvas = document.querySelector("canvas");

     var signaturePad =await new SignaturePad(canvas, {
    minWidth: 5,
    maxWidth: 10,
    penColor: "rgb(66, 133, 244)"
});
     signaturePad.toDataURL();
     signaturePad.toDataURL("image/jpeg"); // save image as JPEG
signaturePad.toDataURL("image/svg+xml"); // save image as SVG

// Draws signature image from data URL.
// NOTE: This method does not populate internal data structure that represents drawn signature. Thus, after using #fromDataURL, #toData won't work properly.
signaturePad.fromDataURL("data:image/png;base64,iVBORw0K...");

// Returns signature image as an array of point groups
const data = signaturePad.toData();

// Draws signature image from an array of point groups
signaturePad.fromData(data);

// Clears the canvas
signaturePad.clear();

// Returns true if canvas is empty, otherwise returns false
signaturePad.isEmpty();

// Unbinds all event handlers
signaturePad.off();

// Rebinds all event handlers
signaturePad.on();
     console.log(signaturePad)
  },

in console I am getting this

backgroundColor: "rgba(0,0,0,0)"
canvas: canvas#signature-pad.signature-pad
dotSize: ƒ dotSize()
maxWidth: 10
minDistance: 5
minWidth: 5
onBegin: undefined
onEnd: undefined
options: {minWidth: 5, maxWidth: 10, penColor: "rgb(66, 133, 244)"}
penColor: "rgb(66, 133, 244)"
throttle: 16
velocityFilterWeight: 0.7
_ctx: CanvasRenderingContext2D {canvas: canvas#signature-pad.signature-pad, globalAlpha: 1, globalCompositeOperation: "source-over", filter: "none", imageSmoothingEnabled: true, …}
_data: []
_handleMouseDown: (event) => {…}
arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.r (<anonymous>:1:83)]
caller: (...)
length: 1
name: ""
__proto__: ƒ ()
[[FunctionLocation]]: signature_pad.js?90e2:129
[[Scopes]]: Scopes[4]
_handleMouseMove: (event) => {…}
_handleMouseUp: (event) => {…}
_handleTouchEnd: (event) => {…}
arguments: (...)
caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.r (<anonymous>:1:83)]
length: 1
name: ""
__proto__: ƒ ()
[[FunctionLocation]]: signature_pad.js?90e2:158
[[Scopes]]: Scopes[4]
_handleTouchMove: (event) => {…}
_handleTouchStart: (event) => {…}
_isEmpty: true
_lastPoints: []
_lastVelocity: 0
_lastWidth: 7.5
_mouseButtonDown: false

is it because this plugin is not more maintained

[bilalswiftsolutions]

I used you plugin before then this package result is same

[laravelteacher]

Would you show your project to me.. On github? Because I wanna try this project.. Till undrestand this project play for me or not. If dont why? Maybe problem is between mobile with.. Pc

در شنبه ۸ مهٔ ۲۰۲۱،‏ ۲:۲۰ Bilal Arshad @.*** نوشت:

I used you plugin before then this package result is same

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Alirezamosavi/vue-signature/issues/1#issuecomment-834804141, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJNCDVWVP2BEAKPPENDC7WDTMROBZANCNFSM44LAP5DQ .