Append draw circle in the div using jquery

I need to make a <div> behave like a paint application in Word. I need to:

• draw a circle
• append that circle if we again again clicking on the click button
• Drag that object
• Resize that
• Rotate that object

I finish all other than the append circle. I can’t able to append this type of draw circle in to the <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>