一口に Web アプリと言っても、フロントエンドのフレームワークは沢山ありまして…。
現在がどういう作りになっているか分からないと回答しにくいです。

固定的な枠線だけであれば、CSS で枠線を縁取った <div> タグを
画像座標に重ね合わせて配置すれば充分かもしれません。

一方、提示されたサンプル動画にあるように、マウスドラッグで描画することが目的の場合は、
基本的にはサーバーサイドでは無く、クライアント側の処理で行うことを検討してください。
HTML5 なら、<canvas> オブジェクトに対して mousedown / mousemove / mouseup イベントで
座標を指定して描画パスを構築します。
https://forse.hatenablog.com/entry/2014/07/05/151405
https://www.tohoho-web.com/html/memo/canvas-2d.htm
https://web-designer.cman.jp/javascript_ref/mouse/linedraw/