CODEWITHSUNDEEP
javascriptcanvas
HHG
HHG

Reputation: 100

How to draw 1/4th circle in HTML5 using canvas

I want to draw circle,then make 4 parts equally of that circle and fill diffrent color in that diffrent part.

context.moveTo(500, 250);
context.lineTo(500, 50);
context.moveTo(500, 250);
context.arc(500,250,200,0,(Math.PI)+(Math.PI/2),false);![][1]`][1]

i have tried but not succesfully reached to my point.From above code pasted, i am just able to draw 1/4th circle.I want to draw complate circle and make equal 4 part of that circle.How it can be possible?

Upvotes: 1

Views: 5301

Answers (3)

markE
markE

Reputation: 105035

You have a good start. Here are a few thoughts on your code:

Drawing commands like moveTo, lineTo and arc must be started with context.beginPath or else all previous drawing commands will be redrawn during 'fill' and 'stroke'. You can only fill with 1 color for each beginPath, so that's why it's important for you to do 4 sets of drawing commands beginning with beginPath so that you can fill with 4 different colors:

// begin a new set of drawing commands
// (or else all previous commands will be redrawn also)
context.beginPath();

context.moveTo(500, 250);
context.lineTo(500, 50);
context.moveTo(500, 250);
context.arc(500,250,200,0,(Math.PI)+(Math.PI/2),false);

BTW, You can simplify the drawing of your wedge using the fact that each part of a drawing command will automatically be connected with a line. This code will draw a full wedge using centerpoints [cx,cy], radius, and the starting & ending radian angles.

context.beginPath();
context.moveTo(cx,cy);
context.arc(cx,cy,radius,startAngle,endAngle);
context.closePath();
context.fill();

Demo: http://jsfiddle.net/m1erickson/nyakoof2/

Upvotes: 3

xkeshav
xkeshav

Reputation: 54050

is that you want : Working Demo

div#semi {
        width:300px;
        min-height: 300px;
        border: 1px solid transparent;
        border-radius: 300px 0 0 0px; /* depends on width */
        border-color: blue red red blue;
}

Upvotes: 0

Hiten Naresh Vasnani
Hiten Naresh Vasnani

Reputation: 538

You can do it like this

context.moveTo(500, 50);
context.lineTo(500, 250);
context.arc(500,250,200,1.5*Math.PI,Math.PI,true);
context.lineTo(500,250);
context.stroke();

Upvotes: 1

Related Questions