Degrees? Radians? Blergh — Errors in the CANVAS Chapter

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.

Errata Specifics

Page 175
in the second paragraph of the “Drawing Circles” section

“…and finally the direction to draw either clockwise (true) or counterclockwise (false).”

Should read:

“…and finally the direction to draw either counterclockwise (true) or clockwise (false).”

Page 175
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).

Should read:

“Radians are measured differently than degrees. 1 radian equals about 57.3 degrees, and there are about 6 radians in every circle.”

Read a chapter and enter to win a copy of the book

Teach Yourself HTML5 Mobile Application Development in 24 HoursIf you haven’t gotten your copy of the book yet, now is your chance to check it out in advance. I have posted a PDF copy of Hour 10: Drawing with the HTML5 CANVAS Element for you to download and read. This is a full-color PDF copy of the chapter exactly as it appears in print. If you want to learn how to build HTML5 CANVAS images, this free chapter is a great place to start.

I am pleased to announce that I have five copies of my book — Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours to give away to readers of this site or the Facebook page. To enter, simply comment on this post how you think you would use this book or why you want to learn HTML5. Winners will be chosen at random on August 1st, 2012. You can also get additional entries by liking my Facebook page and subscribing to the newsletter.

I will announce the winners here on August 2ndGood luck!