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

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°)

Related

Is the Canvas2D ellipse() specification/implementation incorrect?

I've been playing around with how to render wireframe perspective-correct spheres using only canvas2d and ellipse math.
It's been fun, but I've soon come to realize that the ellipse() function has a very strange implementation with regards to the spec.
Indeed, the ellipse function takes 7 (or 8) arguments:
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle)
The startAngle is described as such:
The angle at which the ellipse starts, measured clockwise from the positive x-axis and expressed in radians.
Given a parameter 0 <= t <= 2 * PI, we can compute the position of the associated point on the ellipse like so:
let dx = radiusX * cos(t)
let dy = radiusY * sin(t)
let px = x + dx * cos(rotation) - dy * sin(rotation)
let py = y + dx * sin(rotation) + dy * cos(rotation)
And if we use startAngle = t, our ellipse will begin its arc at our point. But. But. t is NOT an angle, and definitely not the angle of our point from the x-axis of the ellipse. Apparently some people still call it the eccentric angle, but my point still stands.
(See here)
And indeed, if we try to make the arc of an ellipse start at a specific angle, we can see that the result is not what we expect, unless the ellipse is a circle (radiusX = radiusY) or startAngle is a multiple of PI / 2.
Here is an interactive demo I've put up so that you can witness the strange default behaviour.
My claim is that the function should always behave like it does in the corrected case with the current specification.
Either that or change the spec to talk about parameters t for startAngle and endAngle, and avoid saying they are angles, because currently they definitely are not.
Does anyone know how this implementation/spec came to be, if anyone reported this before and if not where to lead such a discussion?
Any other insight appreciated!
I found this related question but it's rather unsatisfactory as replies merely show how to correct the function, but don't discuss whether the spec or implementation should be corrected.

Meaning of Canvas arc function

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.

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.

Drawing Curves on Surfaces in WebGL

Well, the title pretty much states it. I want to be able to draw a curve on a surface in Web GL. So for example, I'd like to draw a parabola on the surface of a sphere.
x = cos(theta)sin(phi); y = sin(theta)sin(phi); z = cos(phi).
If you make theta = theta(t) and phi = phi(t), you can draw curves on the surface.
I guess lines on shapes is what I need. Anyone know if that's possible in Web GL?
A parabola is the set of point of the plane that have the same distance from a line and a point (called focus). The point here is what do you mean by "line" on a sphere. Remember that a parabola extends to infinity, bu you can't do that on a sphere, unless you define some particular metric on it.
Anyway, you gave use a parametrization of the sphere, in terms on theta and phi. That's good. If you want to define a curve on the surface, you should have a bind between theta and phi, for example
phi = theta ^ 2
would draw something that could be defined as a "parabola" in some way, i.e. the projection on the sphere, given by the parametrization, of its representation on a plane.
Are you looking for help with how to do this in WebGL? In this case, take a look at this example
http://dl.dropbox.com/u/17612367/OpenGL%20to%20WebGL/example%202.3.1%20-%20line%20graph/code/index.html
you would basically load the positions into a vector and draw it using drawArrays with LINELOOP or something... See this cheatsheet for arguments or google the drawArrays function for more info:
http://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.pdf
Good Luck!

mathematics for drawing little lines around circle

I have to draw lines around a circle (like in clock). How can i achieve this using a for loop?
I'm not sure how to do the actual drawing of a line in Java but to calculate co-ordinates from a central point (cx,cy) use
px = cx+sin(a)*r
py = cy+cos(a)*r
Where a is the angle (in radians - I think ie 180 degress=π radians) and r is the radius.
To draw the little lines around the outside you would need to use this formula with say a radius of 100 and the also with a radius of 105 and draw between the two sets of co-ordinates.
eg
for (var a=0,aMax=(2*Math.PI),aStep=(Math.PI/30); a<aMax; a+=aStep){
px1 = cx+Math.sin(a)*r;
py1 = cy+Math.cos(a)*r;
px2 = cx+Math.sin(a)*(r+5);
py2 = cy+Math.cos(a)*(r+5);
//draw line between (px1,py1) and (px2,py2)
};
Have a look at the source code of CoolClock.
you should read up on basic trigonometry and focus on Quadrants to achieve that.

Categories