Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

482 CHAPTER 12 Drawing with HTML5

FIGURE 12-13 he arcTo method producing unexpected results if you don’t understand how it worksT

In the first example, the radius of the circle is small, so the circle is slid up past x0, y0 and

x2, y2 until it touches the lines. In this example, t1 is between x0, y0 and x1, y1, whereas t2 is

between x1, y1 and x2, y2. There is some distance between x0, y0 and t1, so this arc starts as a

straight line until it reaches t1. At t1, the curve starts until it reaches t2, where the arc ends.

In the second example, the radius is much larger, so the circle is slid up until it touches the

lines, but this time, t1 is outside x0, y1, and t2 is outside x2, y2. There is still some distance

between (x0, y0) and t1, so a straight line is drawn between the two points. At t1, the curve

starts until it reaches t2, where the arc ends.

Consider the following code example that draws two lines and then creates an arc by using

the arcTo method.

function drawArcTo() {

var canvas = document.getElementById('myCanvas')

, ctx = canvas.getContext('2d');

ctx.strokeStyle = 'gray';