HTML5 Canvas [17]
The context.arcTo method will work only if the current path has at least one subpath. So, let’s start with a line from position 0,0 to position 100,200. Then we will build our small arc. It will look a little like a bent wire coat hanger (for lack of a better description), as shown in Figure 2-7:
context.moveTo(0,0);
context.lineTo(100, 200);
context.arcTo(350,350,100,100,20);
Figure 2-7. An arcTo() example
Bezier Curves
Bezier curves, which are far more flexible than arcs, come in both the cubic and quadratic types:
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)
The Bezier curve is defined in 2D space by a “start point,” an “end point,” and one or two “control” points, which determine how the curve will be constructed on the canvas. A normal cubic Bezier curve uses two points, while a quadric version uses a single point.
The quadratic version, shown in Figure 2-8, is the simplest, only needing the end point (last) and a single point in space to use as a control point (first):
context.moveTo(0,0);
context.quadraticCurveTo(100,25,0,50);
Figure 2-8. A simple quadratic Bezier curve
This curve starts at 0,0 and ends at 0,50. The point in space we use to create our arc is 100,25. This point is roughly the center of the arc vertically. The 100 value for the single control point pulls the arc out to make an elongated curve.
The cubic Bezier curve offers more options because we have two control points to work with. The result is that curves—such as the classic “S” curve shown in Figure 2-9—are easier to make:
context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);
Figure 2-9. A Bezier curve with two control points
The Canvas Clipping Region
Combining the save() and restore() functions with the Canvas clip region limits the drawing area for a path and its subpaths. We do this by first setting rect() to a rectangle that encompasses the region we would like to draw in, and then calling the clip() function. This will set the clip region to be the rectangle we defined with the rect() method call. Now, no matter what we draw onto the current context, it will only display the portion that is in this region. Think of this as a sort of mask that you can use for your drawing operations. Example 2-5 shows how this works, producing the clipped result shown in Figure 2-10.
Example 2-5. The Canvas clipping region
function drawScreen() {
//draw a big box on the screen
context.fillStyle = "black";
context.fillRect(10, 10, 200, 200);
context.save();
context.beginPath();
//clip the canvas to a 50×50 square starting at 0,0
context.rect(0, 0, 50, 50);
context.clip();
//red circle
context.beginPath();
context.strokeStyle = "red"; //need list of available colors
context.lineWidth = 5;
context.arc(100, 100, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);
//full circle
context.stroke();
context.closePath();
context.restore();
//reclip to the entire canvas
context.beginPath();
context.rect(0, 0, 500, 500);
context.clip();
//draw a blue line that is not clipped
context.beginPath();
context.strokeStyle = "blue"; //need list of available colors
context.lineWidth = 5;
context.arc(100, 100, 50, (Math.PI/180)*0, (Math.PI/180)*360, false);
//full circle
context.stroke();
context.closePath();
}
Figure 2-10. The Canvas clipping region
Example 2-5 first draws a large 200×200 black rectangle onto the canvas. Next, we set our Canvas clipping region to rect(0,0,50,50). The clip() call then clips the canvas to those specifications. When we draw our full red circle arc, we only see the portion inside this rectangle. Finally, we set the clipping region back to rect(0,0,500,500) and draw a new blue circle. This time, we can see the entire circle on the canvas.
NOTE
Other Canvas methods can be used with the clipping region. The most obvious is the arc() function:
arc(float x, float y, float radius, float startAngle,
float endAngle, boolean anticlockwise)
This can be used to create a circular