Uncaught TypeError: Cannot read property 'getPointerCoordinates' of undefined.

[bsjaramillo]

at CanvasDraw.loop (index.js:462) at CanvasDraw.applyView (index.js:235) at coordinateSystem.js:155 at Set.forEach () at CoordinateSystem.setView (coordinateSystem.js:154) at CoordinateSystem.set (coordinateSystem.js:252) at ref (index.js:721) at commitAttachRef (react-dom.development.js:20875) at commitLayoutEffects (react-dom.development.js:23431) at HTMLUnknownElement.callCallback (react-dom.development.js:3945)

The above error occurred in the component:

at canvas
at div
at CanvasDraw (http://localhost:3000/main.6c40e7064026ff908261.hot-update.js:1858:28)
at div
at Scribble (http://localhost:3000/main.c09fd8213290a0735b38.hot-update.js:42:5)
at div
at div
at Chat (http://localhost:3000/static/js/bundle.js:558:5)
at div
at section
at O (http://localhost:3000/static/js/bundle.js:93796:6)
at Room (http://localhost:3000/static/js/bundle.js:8413:74)
at Outlet (http://localhost:3000/static/js/bundle.js:85303:26)
at section
at O (http://localhost:3000/static/js/bundle.js:93796:6)
at Main (http://localhost:3000/static/js/bundle.js:8301:75)
at Routes (http://localhost:3000/static/js/bundle.js:85395:5)
at section
at O (http://localhost:3000/static/js/bundle.js:93796:6)
at App (http://localhost:3000/static/js/bundle.js:65:69)
at Provider (http://localhost:3000/static/js/bundle.js:54688:23)
at Provider (http://localhost:3000/static/js/bundle.js:82244:20)
at Router (http://localhost:3000/static/js/bundle.js:85328:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:84804:5)

This happens when i set responsive sizes.

<div className="absolute z-30 top-0 md:translate-y-1/4 md:w-[402px] w-full md:h-[460px] h-full bg-white md:translate-x-1/2 border border-lines rounded" >
  <div className="h-1/10 w-full text-center">Use your {isMobOrTab ? "finger" : "mouse"} to draw{" "}</div>
  <CanvasDraw brushColor="#fff" canvasWidth="100%" canvasHeight="80%" backgroundColor="#1F2937" hideGrid={true} brushRadius={1} ref={canvasDraw => setRefCanvas(canvasDraw)} />
  <FlexDiv direction="row" height="10%">
    <button onClick={handleSendScribble} className="w-1/4 h-full">Send</button>
    <button onClick={handleCancelScribble} className="w-1/4 h-full">Cancel</button>
    <button onClick={handleUndoScribble} className="w-1/4 h-full">Undo</button>
    <button onClick={handleClearScribble} className="w-1/4 h-full">Clear</button>
  </FlexDiv>
</div>

[NiallRedMane]

I think this is the same issue as #134, and will be resolved if the pr #140 every gets merged.

until then you can use the npm package that iinlcudes the fix, instead of this main package https://www.npmjs.com/package/@win11react/react-canvas-draw