is there a way to limit the area that can be drawn?

[CanerIL]

I am trying to add a background image and metadata as watermarks.
How can I ensure that users cannot draw over them?

For the text and image, I tried creating a second canvas and making the signature canvas smaller and centered over it.
combined them both in the End, but resizing and design became messy, and there’s probably a better way to avoid resizing issues.

When I tried modifying the script,

SignaturePad.prototype._createPoint = function (x, y, time) {
  var rect = this._canvas.getBoundingClientRect();

  var leftTopBoundary = 10; 
  var rightBottomBoundary = rect.width - 10;  
  if (x < rect.left + leftTopBoundary || x > rect.left + rightBottomBoundary || y < rect.top + leftTopBoundary || y > rect.top + rightBottomBoundary) {
    return;
  }
  return new Point(x - rect.left, y - rect.top, time || new Date().getTime());
}

thought this would be enought, but it is a little bit off. seems like it either stops too early or starts too early, when the mouse goes over the line

Or is there an alternative way?

[UziTech]

The whole point of signature_pad is to capture what they draw. Instead of limiting them you could add the watermark on endStroke so it is on top. Or add it over the signature_pad and use pointer-events: none to allow the pointer events to go to the signature_pad under it.