CODEWITHSUNDEEP
javascripthtml5-canvas
ttkrpink
ttkrpink

Reputation: 109

HTML5 Canvas, my arc draw a startline to the center

The arc have the following result. Do I have to calculate the start point of the arc myself? jsfiddle link here: jsfiddle link here

Snapshot

canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
context.beginPath();
context.strokeStyle = "#FF0000";
context.lineWidth = 1;
//   context.moveTo(49, 49);
context.arc(19, 19, 15, 0, 1 * Math.PI);
context.moveTo(49, 49);
context.arc(49, 49, 15, 0, 1 * Math.PI);

context.stroke();

Upvotes: 0

Views: 383

Answers (2)

Arif Burhan
Arif Burhan

Reputation: 505

If you want a complete circle you should use 2 * Math.PI. You can make javascript calculate the starting position, for a circle with center (cx,cy) and radius r.

Use context.arc(cx + r,cy) and so on If you have definite values, Eg. Centre at 100,100 and radius 50 use

context.arc(150,100,...)

Upvotes: 0

Jonas Grumann
Jonas Grumann

Reputation: 10786

You need to close the path each time:

http://jsfiddle.net/8EDHb/1/

context.beginPath();
context.arc(19, 19, 15, 0, 1 * Math.PI);
context.stroke();
context.closePath();
context.moveTo(49, 49);
context.beginPath();
context.arc(49, 49, 15, 0, 1 * Math.PI);
context.stroke();
context.closePath();

Upvotes: 1

Related Questions