Question: Can we use react-rnd to draw a circle based on the mousedown and mouseup coordinates?

[getnsv]

Is it a bug/feature/question or do you need help? Question

Overview of the problem

I'm using react-rnd 10.1.10

My browser is: chrome and edge

I am sure this issue is not a duplicate

Reproduced project

Sorry I dont have one, as am not sure that dynamic behavior is supported. Initially am using the below code. <Rnd style={bevMarkerstyle} default={{ x: 170, y: 100, width: 202, height: 153 }} onDragStop={(e, d) => { console.log("ondragstop"); console.log(e); console.log(d.x); console.log( d.y); }} onResizeStop={(e, direction, ref, delta, position) => {

                        }}
                        bounds={'parent'}
                        disableDragging={true}
                    >
                        
                    </Rnd>

Description

My usecase is that I want to be able to draw a circle from the mousedown coordinates till the mouseup coordinates. Then get the radius of the circle. Everytime the user clicks mousedown the old circle should be deleted and new circle should be drawn and ability to get the new radius. And I should be able to render this circle as an overlay on an existing chartjs chart.

Something like this http://jsfiddle.net/m1erickson/3SFJy/

Please kindly let know if this is possible with the apis I could use. Thanks very much in advance for your help

Steps to Reproduce

This is only a question and not a bug. Something like this - http://jsfiddle.net/m1erickson/3SFJy/

Expected behavior

Actual behavior