Read-only, disabled Canvas?

[wazcov]

Is there a simple way to make this readonly, or non-editable? I know that I can simply not save the data in a database, however the user can still draw over the existing canvas.

[fonsleenaars]

I had this issue as well and ended up just loading the data url into an img tag. I believe there's no easy way except overwriting the event handlers that draw on the canvas.

I support the idea though, a read only mode (all that's needed is an added boolean that either removes event handlers or is checked when they're called) would be pretty useful.

[wazcov]

@fonsleenaars I had no idea it was even possible to load data uris into an img tag on all browsers, but apparently so! thanks

[agilgur5]

@fonsleenaars is correct that using the dataURL is an option to do that and that's how it's typically used (see the example). The other option would be to call .off() on the ref to do that.

Not sure what the exact use-case of having a read-only canvas (vs. using an img tag) so elaboration on that would be helpful.

The optimal method to implement something would actually be to call .off and the opposite ones using componentWillReceiveProps. Some of the events attach to the document, not just the canvas element itself, so it's not as simple as using React's SyntheticEvent unfortunately. Checking a boolean on every call isn't as optimal vs. removing the event handlers.

[Nathan22Miles]

I am storing the data as paths (instead of images). I am doing this because 1) I need to resize the drawing as the div size changes and 2) I would like to be able to go back and edit the drawing.

Because of this is would be very helpful to be able to load the paths but not allow the user to change the drawing unless they were in edit mode.

Thank you for this greate component!

[Nathan22Miles]

I changed the strokeColor to "transparent" and ignored the "onChange" event.

[dragoshuniq]

have a wrapper as and

  <div  data-disabled={disabled}>
      <SignatureCanvas
      />
    </div>

add this to the div className

&[data-disabled='true'] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }