Need to create mutiple circle in a canvas like a paint application

I need to create circle when clicking in the circle button,like the circle in paint. Need to draw as many as the user need.

How to work that by using Jquery, HTML5 and CSS3???

I need an application like this:

Any body know this please help me And i created event for single circle and that is draggable one. How to add more more images in that section.

<script>
function draw_circle() {

 var canvasObj = document.getElementById("mycanvas");

 var canvasCtx = canva开发者_开发知识库sObj.getContext("2d");

 canvasCtx.beginPath();

 canvasCtx.arc(100,100,50,0,Math.PI*2,true);

    var centerX = 288;
    var centerY = 100;
    var radius = 70;


    canvasCtx.fillStyle = "#CB5155";
    canvasCtx.fill();
    canvasCtx.lineWidth = 5;
    canvasCtx.strokeStyle = "black";
    canvasCtx.stroke();

}

    $(function() {
        $( "#mycanvas" ).draggable();
    });


</script>

<canvas id="mycanvas" width="200" height="200"/></canvas>

jCanvas jQuery plugin is a potential solution.

$('#mycanvas').drawArc({
  fillStyle: '#CB5155',
  x: 288, y: 100,
  radius: 70,
  strokeStyle: 'black',
  lineWidth: 5
});

$('#mycanvas').drawArc({
  fillStyle: '#442299',
  x: 188, y: 70,
  radius: 30,
  strokeStyle: 'blue',
  lineWidth: 2
});

That should draw 2 circles on the canvas. Rinse and repeat.