HTML and CSS Reference
In-Depth Information
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();
 
Search WWH ::




Custom Search