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

      • royd's avatar
        royd
        Regular Contributor
        8 years ago

        Great tip Alex!

         

        This will be in my to do list! :)

         

        Thank you.

         

        Dave