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

[nikhil478]

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);
}

[agilgur5]

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 https://github.com/agilgur5/react-signature-canvas/issues/60#issuecomment-1030713591, 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.

[nikhil478]

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