Draw2D alignement in react, or Draw2D boxing

Question

I found a simple application with React and draw2D.

The dashbox is the div and the canvas.

The circle is a

draw2d.shape.basic.Circle({
        x: 40,
        y: 10,
        stroke: 3
      })

How to change the code to draw the circle inside the box dashed (the canvas)?

https://codesandbox.io/s/exciting-cray-97g6r?file=/src/App.js

thanks.

Answer 1

The first solution

<span>
<p>Avec canvas2</p>   
<div ref={inputRef} id="canvas" 
style={{ height: 200, width: 300, border: "dashed brown",position:"relative" }}/>   
</span>

Only add position:"relative", to the div.

I improve this solution again.

componentDidMount() {
    this.canvas = new draw2d.Canvas("canvas", 9000, 9000));

    this.canvas.add(
      new draw2d.shape.basic.Circle({
        x: 40,
        y: 10,
        stroke: 3
      })
    );
}

render() {
    return (
      <span>
        <p>Avec canvas2</p>
        <div
          id="canvas"
          style={{ height: 600, width: 600, border: "dashed brown" }}
        />
      </span>
    );
}

Now, we have a big picture inside a window ..