We are implementing documents electronic signature using createJS library. We collect the user signature and save it then we load the document in a canvas and mark the signature place in each page. Each document may has one or more pages or may not have any at all. Most of the documents are coming from other webservices and they send us an array of signature events along with base64 of the page. Each signature event has the location x and y of the signature in the page in pixels and we load the signature in the page using createjs.Bitmap and it load exactly where it suppose to be with no issues. The issue is we are trying to implement a Next Signature feature where the screen should scroll to the next signature location (see the mockup) Right now each document card has accordion class and will close the card after all signatures in the document are signed. Currently I multiply the number of open pages * 1024 + (signatureEvent[y]) then use jQuery scroll to the location. But after 4-5 Documents the locations are not accurate and the page scroll to the wrong signature location.
So I'm looking into a way to associate each signature with a div element with an id I can scroll to or any other method maybe used with createjs elements. Each signature is placed inside createjs container then placed into the canvas but I dont see the container's id when I inspect the html.
var signatureContainer = new createjs.Container();
signatureContainer.id = item.SignatureEventId;
signatureContainer.x = item.Left;
signatureContainer.y = item.Top;
signatureContainer.PageNum = item.PageId;
I also tried to use createjs DOMElement but failed to associate it with the signature container.
Any direction will be appreciated.
