使用jquery在div中附加绘制圆圈

Question

我需要让<div>表现得像Word中的绘图应用程序。我需要：

• 画一个圆圈
如果我们再次点击点击按钮，
• 会附加该圈子
• 拖动该对象
• 调整大小
• 旋转该对象

除了追加圈之外，我完成了所有其他操作。我无法将此类绘制圈添加到<div>。

<div id="currentCircle" class='drawCircle'>
</div>


<script>
    $(function() {
        $("#currentCircle").draggable();
    });

    $(document).ready(function() {
        $('#pink-circle-button').click(function() {
            $('#currentCircle').css({
                'border': '2px solid rgb(255, 0, 255)', 
                'background-color':'',
                'position': 'fixed',
                'display': 'block',
                'top': '97px', 
                'left': '372px',
                'width': '93px', 
                'height': '90px', 
                'border-radius': '76.5px 76.5px 76.5px 76.5px '
            });
            $( "#currentCircle" ).resizable();
            $("#currentCircle").append();  
        });
    });
</script>