(feat): add prop to prevent clearing canvas on resize

- if `clearOnResize` is `false`, then a window resize will no
  longer cause the canvas to clear itself

- defaults to `true` for backward compatibility

Author: lopis

src/index.js

@@ -14,7 +14,8 @@ export default class SignatureCanvas extends Component {
     penColor: PropTypes.string,
     onEnd: PropTypes.func,
     onBegin: PropTypes.func,
-    canvasProps: PropTypes.object
+    canvasProps: PropTypes.object,
+    clearOnResize: PropTypes.bool
   }
 
   static defaultProps = {
@@ -27,7 +28,8 @@ export default class SignatureCanvas extends Component {
     penColor: 'black',
     backgroundColor: 'rgba(0,0,0,0)',
     onEnd: () => {},
-    onBegin: () => {}
+    onBegin: () => {},
+    clearOnResize: true
   }
 
   componentDidMount () {
@@ -83,6 +85,13 @@ export default class SignatureCanvas extends Component {
 
   isEmpty = () => this._isEmpty
 
+  _checkClearOnResize = () => {
+    if (!this.props.clearOnResize) {
+      return
+    }
+    this._resizeCanvas()
+  }
+
   _resizeCanvas = () => {
     let canvasProps = this.props.canvasProps || {}
     let {width, height} = canvasProps
@@ -120,7 +129,8 @@ export default class SignatureCanvas extends Component {
     this._canvas.addEventListener('mousedown', this._handleMouseDown)
     this._canvas.addEventListener('mousemove', this._handleMouseMove)
     document.addEventListener('mouseup', this._handleMouseUp)
-    window.addEventListener('resize', this._resizeCanvas)
+
+    window.addEventListener('resize', this._checkClearOnResize)
   }
 
   _handleTouchEvents = () => {
@@ -141,7 +151,7 @@ export default class SignatureCanvas extends Component {
     this._canvas.removeEventListener("touchmove", this._handleTouchMove)
     document.removeEventListener("touchend", this._handleTouchEnd)
 
-    window.removeEventListener("resize", this._resizeCanvas)
+    window.addEventListener('resize', this._checkClearOnResize)
   }
 
   _handleMouseDown = (ev) => {