Forum Discussion

royd's avatar
royd
Regular Contributor
8 years ago

How to simulate signature on html canvas

Hi all,

 

I’m using TestComplete version 12 and Jscript. Is possible to make a mark on a HTML canvas (IE11)?  I am attempting to simulate signature using mouse. I should point out, I’m new to scripting.

 

 

I would really appreciate if someone can show me how.

 

Regards,

 

Dave

  • tristaanogre's avatar
    tristaanogre
    8 years ago

    I think you should be able to just use a "drag" call.  So, if your canvas is called canvasSignature, to draw a mark on the canvas, just do

     

    canvasSignature(-1, -1, 100, 100)

    This will click in the center of the object and drag the mouse 100 pixels down and 100 pixels right.  That should draw a line.

    Now, if you want to ACTUALLY do a signature... yeah, that could get trickey as you would need to combine a lot of different drag calls.  But if you just want to make a mark, "Drag" should do what you want.

  • tristaanogre's avatar
    tristaanogre
    Esteemed Contributor
    8 years ago

    I think you should be able to just use a "drag" call.  So, if your canvas is called canvasSignature, to draw a mark on the canvas, just do

     

    canvasSignature(-1, -1, 100, 100)

    This will click in the center of the object and drag the mouse 100 pixels down and 100 pixels right.  That should draw a line.

    Now, if you want to ACTUALLY do a signature... yeah, that could get trickey as you would need to combine a lot of different drag calls.  But if you just want to make a mark, "Drag" should do what you want.

    • royd's avatar
      royd
      Regular Contributor
      8 years ago

      Thanks Robert!

       

      It works! You are a lifesaver! I can't think you enough.

       

      To make it work, I had to use drag method before the coordinates as follows -

       

      canvasSig.Drag(-1, -1, 100, 100);

       

      I am more than happy with a strait line! This serves the purpose for what it supposed to. Thank you!

       

      Dave

      • AlexKaras's avatar
        AlexKaras
        Champion Level 3
        8 years ago

        Hi Dave,

         

         

        Good to know that the problem is solved. The suggested approach with Drag is simple and reliable.

        Just in case you will need to draw something more complex, you may consider recording of the Low Level procedure or craft it manually using LLPlayer object.