Cannot read properties of undefined (reading 'getPointerCoordinates') when setting a small canvasWidth

[gabriprat]

trafficstars

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I'm calculating the size of the canvas based on the size of the image and the size of the screen to make sure the image always fits the screen. When I tried editing images that were much taller than wider I got an error like this:

Cannot read properties of undefined (reading 'getPointerCoordinates')

The easiest way to reproduce the problem for me was to set canvasWidth={100} and canvasHeight={400} and then I consistently reproduced the error.

Here is the diff that solved my problem:

diff --git a/node_modules/react-canvas-draw/es/index.js b/node_modules/react-canvas-draw/es/index.js
index a089ebc..5469492 100644
--- a/node_modules/react-canvas-draw/es/index.js
+++ b/node_modules/react-canvas-draw/es/index.js
@@ -458,7 +458,7 @@ var CanvasDraw = /*#__PURE__*/function (_PureComponent) {
           _ref4$once = _ref4.once,
           once = _ref4$once === void 0 ? false : _ref4$once;
 
-      if (_this.mouseHasMoved || _this.valuesChanged) {
+      if (_this.lazy && (_this.mouseHasMoved || _this.valuesChanged)) {
         var pointer = _this.lazy.getPointerCoordinates();
 
         var brush = _this.lazy.getBrushCoordinates();

This issue body was partially generated by patch-package.

[loverdeveloper]

any update?

[Pramod-Butte]

Indeed amazing project!! I am facing the same issue:

Any size below 150 will cause crash, it starts crashing at size of 149 and lower values from height and width! Strange. I would like to set the canvas size to match the size of the imgsrc Image, Any help is appreciated. Thanks

update: on further experimentation, the lower limit for width is 150 and height is 75.

[yashash-pugalia]

any update?

https://github.com/embiem/react-canvas-draw/pull/140 there is a PR to fix this apparently