Необходимо создать несколько кругов на холсте, как приложение для рисования

Question

Мне нужно создать круг при нажатии на кнопку круга, как круг в краске. Нужно нарисовать столько, сколько нужно пользователю.

Как это сделать, используя Jquery, HTML5 и CSS3 ???

Мне нужно приложение типа this :

Любое тело знает это, пожалуйста, помогите мне И я создал событие для одного круга, и это перетаскиваемый. Как добавить больше изображений в этот раздел.

<script>
function draw_circle() {

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

 var canvasCtx = canvasObj.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>

Answer 1

jCanvas Плагин jQuery является потенциальным решением.

$('#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
});

Это должно нарисовать 2 круга на холсте. Промыть и повторить.