agilgur5 / react-signature-canvas

A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad

Home Page:https://agilgur5.github.io/react-signature-canvas/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Background Image lost while converting `toData` and back with `fromData` ("undo" operation)

nikhil478 opened this issue · comments

i was trying to render image in background of canvas by using canvas .fromDataUrl() func it is properly working
after using pen on canvas i want a option to revert last operation

so what i am trying to do is basically converting canvasObject to Data array and pop and then back to canvasObject code was something like this

undoCanvas = () => {
  let data = canvasRef.toData();
  if (data.length > 0) {
    data.pop();
  }
  canvasRef.fromData(data);
}

upstream issue, not specific to react-signature-canvas

Per this project's description, react-signature-canvas is merely a wrapper component around signature_pad.
Any activity that uses the ref is behavior that is provided by signature_pad and not specific to react-signature-canvas.
So your issue belongs upstream in signature_pad's repo, and not here.

support request, not a bug

That being said, this does not seem like a bug and seems more like a support request. GitHub issues are mostly for bug reports. I can attempt to answer, but please recognize that I am a volunteer and am not paid to answer support questions (or maintain this library at all, for that matter).
StackOverflow may be a better platform for such a question. signature_pad also has GitHub Discussions open that may be better suited for this type of request.

try CSS background-image instead

toData only returns the point and curve information of your drawing ("pen"). That contains detailed, SVG-like vector data of for each click, drag, etc.
fromDataUrl, on the other hand, inserts a raster image onto the canvas. It's a single image; the dataUrl is merely a blob, and does not contain detailed point+curve information. This is briefly mentioned in signature_pad's docs in the example comments.
So data and dataUrl are distinct entities effectively, storing two different forms of information -- point+curve data vs. a blob of the whole canvas.

So if you want to use a background image, I might suggest an alternative method. For instance, as I recommended in #60 (comment), you could use the CSS background-image property instead.
This would have the benefit of being independent of and untied to the point+curve data, it'll just be consistently there.

@agilgur5 thanks for assistance and taking the time to help me !