How to draaw a line on canvas

Context:

1. I want to test a signature canvas field
2. So i want to draw a signature and then validate that signature is displayed on the canvas.
3. Right now i cannot even draw a proper line , so wanted to understand how action class works in protractor before i go for the actual implementation.

It would be great if someone could help me

I am trying to draw a line on the canvas : https://vrobbi-nodedrawing.herokuapp.com/ at a particular location say on the right side like:

I tried too many ways nothing is working below is the code that draws atleast something on the screen:

await browser.get("https://vrobbi-nodedrawing.herokuapp.com/");

await browser.sleep(5000);


let canvas = $('canvas#paper')
await canvas.click();

await browser.actions().
mouseMove(canvas, {
        x: 120,
        y: 100
    }).mouseDown().mouseMove(canvas, {
        x: 120,
        y: 200
    })
    .perform();

But i am getting below output and not a vertical line as expected:

Also:

I checked the canvas size using chrome inspect tool and it shows : 1922*939

But when i give move to element .mouseMove( canvas, { x: 50, y: 500 }) i am getting below error:

> Failed: move target out of bounds
>       (Session info: chrome=83.0.4103.61)
>     Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'
>     System info: host: 'DESKTOP-U2HJMCV', ip: '192.168.254.1', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0',
> java.version: '12.0.1'
>     Driver info: driver.version: unknown   Stack:
>     MoveTargetOutOfBoundsError: move target out of bounds

1. Could someone help me in understanding how to calculate offset , why the exception is thrown
2. how to find offset inside an element (Here canvas)
3. How draw a straight line

Bug report

• Node Version: v10.15.3
• Protractor Version: Version 5.4.3
• Browser(s): chrome
• Operating System and Version Windows 10

[Fuun347]

@praveendvd Actually I even got confused. You are right. It does say if an offset is provided it will be based on the top left corner of the element. But I don’t think that’s correct. The documentation might be outdated. Not too sure.

[praveendvd]

Thanks for that it works