So, I was doing some
CANVAS work today creating circles. And I know that the start and end points of my circle drawings are written in radians, and I know that to get a radian from a degree, I need to convert from degrees with the calculation:
var radians = (Math.PI/180) * degrees;
But as I was doing the work, the circles weren’t acting like I expected them to. I’m not sure how I missed this during my edits, but in Hour 10: Drawing with the HTML5 Canvas Element (which is one of the chapters available free from this site) I stated that in degrees 0° is noon on a clock, but that is wrong.
In fact, 0° is 3 o’clock. But what is more telling is that degrees then move counter-clockwise around the clock face. So 90° is noon, 180° is 9 o’clock, 270° is 6 o’clock and so on.
The other error is the implication that 0 radians is a different location than 0°. But in fact, if you do the math, you will see that they are exactly the same. Plugging it into the above formula, you get:
var radians = (Math.PI/180) * 0;
var radians = 0;
This may not seem like a big deal if all you ever draw are complete circles. But if you’re trying to draw a half circle starting at 3 o’clock and ending at 9 o’clock, you might be very frustrated if you think that would be 90° to 270°. You would still get a half circle, but it would be on the right side of the clock rather than the bottom of the clock.
Direction of the Arc
Another error that I found regarding drawing circles on canvas regards the direction the pointer travels when drawing the circle or arc. In the book I stated that the final value of the
arc method was the direction. This is correct, but the values I listed were wrong. It should say that
true means counterclockwise and
false means clockwise.
The code that is included in hour 10 does work correctly, it was just how the code was described that was incorrect.
I hope these errors didn’t confuse anyone, I will make sure to get this corrected in future editions.
in the second paragraph of the “Drawing Circles” section
“…and finally the direction to draw either
true) or counterclockwise (
“…and finally the direction to draw either counterclockwise (
true) or clockwise (
in the “By the Way” section titled “How to Find Start and End Points for Circles and Arcs”
Radians do not have the same starting point as degrees (in degrees 0° is noon, but in radians it is not).”
“Radians are measured differently than degrees. 1 radian equals about 57.3 degrees, and there are about 6 radians in every circle.”