CODEWITHSUNDEEP
jqueryhtmlcss
You-16
You-16

Reputation: 21

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 = 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>

Upvotes: 1

Views: 808

Answers (1)

Matthew Nessworthy
Matthew Nessworthy

Reputation: 1428

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.

Upvotes: 3

Related Questions