Meaning of Canvas arc function - javascript

I am working with canvas arc function.I am unable to figure out the meaning of last two parameters.
Please help me with the meaning of parameters.Thank You
ctx.arc(x, y, 70,0, 2 * Math.PI);

That's the end angle, previous parameters say that the arc starts at 0 angle to 2PI.
2PI = 360° so you are drawing a circle.

Related

Why executing Canvas.getContext('2d').arc method with exact same parameters yields different result

I execute the following code:
context.arc(100,50,50,2,3);
context.stroke();
context.arc(100,50,50,2,3);
context.stroke();
Why does the result is an arc and a closing line instead of one arc which is actually two identical arcs drawn the same way?
The parameters for the functions are its center coordinates, radius and angles.
According to that identical execution should give identical result to my understanding.
Thanks in advance
This happens because there are actually three segments on the paths.
The first arc draws a sub-path like this:
Then the path cursor is moved back to start since it has the same location as the first arc, and in the process it will create a line since all paths are currently connected:
To avoid it you can break up the sub-path by creating a new one by using moveTo() and move the cursor to the position the next arc will start, or simply clear the current path and start a new:
Example
var context = c.getContext("2d");
context.arc(100,50,50,2,3);
context.stroke();
context.beginPath();
context.arc(100,50,50,2,3);
context.stroke();
<canvas id=c></canvas>
To use moveTo() you would have to calculate the angle using:
centerX + cos(angle) x radius
centerY + sin(angle) x radius
Example
var context = c.getContext("2d");
context.arc(100,50,50,2,3);
context.stroke();
context.moveTo(100 + Math.cos(2) * 50, 50 + Math.sin(2) * 50);
context.arc(100,50,50,2,3);
context.stroke();
<canvas id=c></canvas>

using a value other than 0 for the startAngle of arc method in canvas

canvas's arc method has the following syntax:
void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
I was just playing around with this example HERE.
and I just changed the startAngle to be (MATH.PI * 2 ). Usually people use 0 for that parameter , so what difference does it make whether I use 0 or MATH.PI * 2 ? Can anybody explain ?
It makes no difference. They can be used interchangeably if you are drawing a complete circle i.e.
2 * Math.PI
the function uses the radian measure - this measure
is periodically to 2*MAHT.PI.
So, it makes no difference wheter you use 0, 2*Math.PI or any multiple of it
(like 222*Math.PI)

How do I convert an HTML5 Canvas arc() to JavaFX 2.x Canvas arc()?

I wish to convert a statement from JavaScript used in an HTML5 Canvas such as:
ctx.arc(x, y, (rad+5)*factor, 0, Math.PI*2, true);
to the equivalent statement in JavaFX.
What would it look like?
For reference, in HTML5 Canvas the arc() method is defined as:
x The x-coordinate of the center of the circle
y The y-coordinate of the center of the circle
r The radius of the circle
sAngle The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
eAngle The ending angle, in radians
counterclockwise Optional. Specifies whether the drawing should be counterclockwise or clockwise. False=clockwise, true=counter-clockwise
but in JavaFX it is defined as:
public void arc(double centerX, double centerY, double radiusX, double radiusY, double startAngle, double length)
Adds path elements to the current path to make an arc that uses Euclidean degrees. This Euclidean orientation sweeps from East to North, then West, then South, then back to East.
Parameters:
centerX - the center x position of the arc.
centerY - the center y position of the arc.
radiusX - the x radius of the arc.
radiusY - the y radius of the arc.
startAngle - the starting angle of the arc in the range 0-360.0
length - the length of the baseline of the arc.
Could someone please show me what the JavaFX arc() statement would look like and explain how to convert between these two? Or should I be using arcTo() or something else entirely?
Thanks.
The equivalent statement of this:
var rad=10;
var factor=5;
context.beginPath();
context.arc(x, y, (rad+5)*factor, 0, Math.PI*2, true);
in javafx would be:
int rad=10;
int factor=5;
graphicsContext.strokeArc(x, y, (rad+5)*factor,(rad+5)*factor, 0, 360, ArcType.OPEN);
The angles in HTML5 are in radians, and in Java in degrees. also Java has 2 radius parameters to make it more general as you can draw ellipse arcs.

Canvas Pixels Error

I've got the following code:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(130, 0);
ctx.lineTo(130, 150);
ctx.stroke();
I've got a little messed up with the pixels and rotating the draw / line.
Let me explain, I've got normal canvas code, but rotate is not working correctly. I've tried playing a little with the numbers but I still can't get the angles I want since I can make only 180 rotation and not 270 (More or less).
Here is an image to explain what I want:
http://img689.imageshack.us/img689/1996/13648488297821.jpg
The red line is the angles I want but the black line is the angles I get (black angles and above is all I can get, under the black line I can't do any rotation to get the wanted angle).
Please don't give me CSS Code since I'm using a JavaScript code loop
The references from where I come up with this code can be found here, and here. It is much easier if you split the line and make it into two with one after the other.
For example...
ctx.beginPath();
//edit the x or y to change starting point.
ctx.moveTo(50, 100);
//edit the x to change the length, and y for the angle.
//if you want a horizontal line this y must be the same as the moveto y.
ctx.lineTo(150, 100);
//This x & y must be the same as the previous lineto.
ctx.moveTo(150, 100);
//edit the x to change the length, and y for the angle.
ctx.lineTo(200, 130);
ctx.stroke();
Remember that the methods take (x,y) and as long as your first lineTo and next moveTo are the same positions you will not have a break in your two lines. Hope this helps!

What is start angle and end angle of arc in html5 canvas?

I'm learning HTML5 and I"m stuck on arc.
syntax
arc(x, y, radius, startAngle, endAngle, anticlockwise)
I'm not getting this startAngle,endAngle perfectly how this two parameters are calculated to
draw different types of circles,arcs?
This method takes Six parameters:
x and y are the coordinates of the circle's center.
Radius is self explanatory.
The startAngle and endAngle parameters define the start and end points of the arc in radians. The starting and closing angle are measured from the x axis.
The anticlockwise parameter is a boolean value which when true draws the arc anticlockwise, otherwise in a clockwise direction.
For better understanding of startAngle and endAngle
http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/
They are radians, not degrees.
Some good examples
I looked into a few answers and was very confused by degrees and radians so I drew an image when I tested using html5 canvas. Hope this one help you understand easily.
If you are more familiar with number than formulas with PI,then
The answer to put in the parameter is simply between 0-6.2831 approximately (2π,360°)
and it doesn't take either "π" or degrees(180°)

Categories