Canvas path strokes and fills in a drawing

1. Path, stroke and fill

To date, the only figure we have drawn in this chapter is the rectangle drawn by invoking the Strokerect () method on the canvas drawing environment object. We also populate it by calling the FillRect () method. Both of these methods take effect immediately. In fact, they are the only two methods in the canvas drawing environment that can be used to draw graphics immediately (the Stroketext () and Filltext () methods are also drawn immediately, but the text is not a graphic). There are also methods in the drawing environment object that are used to draw more complex graphics such as Bezier curves (Bézier curve), which are based on paths (path).

Most of the rendering systems, such as the Scalable Vector Graphics (Scalable vectorial Graphics, abbreviated SVG), the Apple Cocoa Framework, and Adobe Illustrator, are all based on paths. When you use these drawing systems, you need to define a path and then stroke it (that is, the contour of the drawing path) or fill it, or you can fill it with a stroke. Figure 2-13 illustrates these three ways of rendering.

Figure 2-13 Stroke and fill effect of a graphic

The application creates 9 different paths, strokes the path to the left column, fills the path of the middle column, and strokes and fills the path to the right column.

The first row of the rectangular path and the last line of the ARC path are closed paths (closed path), and the ARC path of the middle line is the open path (open path). Note that you can populate a path whether it is open or closed. When an open path is populated, the browser populates it as a closed path. This is the effect of the graphic in the middle of the column to the right of the figure.

Listing 2-9 of the program lists the code for that application in Figure 2-13.

Program listing 2-9 text, strokes of rectangles and arcs, and padding

var Context=document.getelementbyid ("Drawingcanvas"). GetContext ("2d"); Functions. function DrawGrid (context,color,stepx,stepy) {//listing omitted for brevity.
Example 2.13//for a complete listing.
}//initialization ... drawgrid (context, "Lightgray", 10,10);
Drawing attributes ... context.font= "48pt Helvetica";
Context.strokestyle= "Blue";
Context.fillstyle= "Red";
Context.linewidth= "2";
Line width set to 2 for text//text ... context.stroketext ("Stroke", 60,110);
Context.filltext ("Fill", 440,110);
Context.stroketext ("Stroke&fill", 650,110);
Context.filltext ("Stroke&fill", 650,110);
Rectangles. context.linewidth= "5";
Line width set to 5 for Shapes Context.beginpath ();
Context.rect (80,150,150,100);
Context.stroke ();
Context.beginpath ();
Context.rect (400,150,150,100);
Context.fill ();
Context.beginpath ();
Context.rect (750,150,150,100);
Context.stroke ();
Context.fill ();
Open arcs ... context.beginpath ();
Context.arc (150,370,60,0,MATH.PI*3/2);
Context.stroke (); Context.beginpath ();
Context.arc (475,370,60,0,MATH.PI*3/2);
Context.fill ();
Context.beginpath ();
Context.arc (820,370,60,0,MATH.PI*3/2);
Context.stroke ();
Context.fill ();
Closed arcs ... context.beginpath ();
Context.arc (150,550,60,0,MATH.PI*3/2);
Context.closepath ();
Context.stroke ();
Context.beginpath ();
Context.arc (475,550,60,0,MATH.PI*3/2);
Context.closepath ();
Context.fill ();
Context.beginpath ();
Context.arc (820,550,60,0,MATH.PI*3/2);
Context.closepath ();
Context.stroke (); Context.fill ();

First call the Beginpath () method to start a new path, rect () and the arc () method are used to create the rectangle and the ARC path respectively. The application then invokes the stroke () and fill () methods on the drawing environment object to stroke or fill those paths just now.

The effects of stroke and fill operations depend on the current drawing properties, including LineWidth, Strokestyle, FillStyle, and Shadow properties. For example, the application in Listing 2-9, which sets the value of the LineWidth property to 2, then strokes the text and then resets it to 5, and then strokes the path.

The path created by the Rect () method is closed, however, the ARC path created by the arc () method is not closed unless you use it to create a circular path. To close a section of a path, you must call the Closepath () method just as in listing 2-9 of the program.

Table 2-5 summarizes the path-related methods in this application.

Hint: path with invisible ink

There is an appropriate analogy that can be used to describe the operation "create a path and then stroke or fill it." We can compare the operation to "drawing with invisible ink".

The content you draw with the invisible ink is not immediately displayed, you must do some follow-up, such as heating, smear chemicals, irradiation infrared, etc., you can show the content of the painting. If the reader is interested in this topic, you can read all the knowledge about invisible ink in http://en.wikipedia.org/wiki/Invisible_ink.

Using a method such as Rect () and arc () to create a path is like using invisible ink to draw. These methods create an invisible path that can later be called stroke () or fill () to make it visible.

2. Path and sub-path

At some point, only one path exists within the canvas, and the canvas specification calls it the current path. However, this path can contain many sub paths (subpath). And a subpath is made up of two or more points. For example, you can draw two rectangles like this:

Context.beginpath ();
Clear all subpaths from
//the current path
context.rect (10,10,100,100);//add a subpath with four points
Context.stroke ();
Stroke the subpath containing
//four points Context.beginpath
();
Clear all subpaths from the
//current path
context.rect (50,50,100,100);//add a subpath with four points
Context.stroke ();
Stroke the subpath containing
//four point

The above code begins a new path by calling Beginpath (), which clears all of the subpath in the current path. The code then calls the Rect () method, which adds a 4-point subpath to the current path. Finally, the stroke () method is invoked to depict the contour line of the current path, making the rectangle appear in the canvas.

Next, the code calls the Beginpath () method again, which clears the subpath that was created when the Rect () method was last called. Then, once again, call the Rect () method, which adds a 4-point subpath to the current path. Finally, the path is stroked so that the second rectangle also appears in the canvas.

Now consider what happens if the second Beginpath () call is removed. Like this:

Context.beginpath ();
Clear all subpaths from the
//current path
context.rect (10,10,100,100);//add a subpath with four points
Context.stroke ();
Stroke the subpath containing
//four points context.rect
(50,50,100,100);//add a second subpath with
// Four Points
Context.stroke ();
Stroke both subpaths

This code in the beginning is the same as the previous paragraph: Call Beginpath () to clear all the subpath in the current path, and then call Rect () to create a subpath that contains 4 points of the rectangle, and then invoke the stroke () method to make the rectangle appear above the canvas.

Next, the code calls the Rect () method again, but this time, the second call to the Rect () method adds a subpath to the current path because the Beginpath () method is not called to clear the original subpath. Finally, the code calls the stroke () method again, and this time the call to the stroke () method will cause the two subpath in the current path to be stroked, meaning that it will redraw the first rectangle.

"Non 0 Wrapping rules" used when filling paths

If the current path is circular or contains multiple intersecting subpath, then the canvas plot environment variable must determine how the current path should be populated when the fill () method is called. Canvas use "Non 0 Wrapping rules" (nonzero winding rule) to determine when filling the path that crosses each other. Figure 2-14 illustrates the application of this rule.

The "Non 0 surround rule" is the way to judge a path with a self crossover: for any given region in the path, draw a long enough segment from within the area to make the end of the segment fall completely outside the path. The three arrows in Figure 2-14 describe the above step.

Figure 2-14 using a "non-0 surround rule" to determine when filling a path

Next, initialize the counter to 0, and then change the counter's value whenever the segment intersects a line or curve on the path. If it intersects the clockwise part of the path, add 1, minus 1 if it intersects the counterclockwise part of the path. If the counter's final value is not 0, then the area is in the path, and when the fill () method is called, the browser fills it. If the final value is 0, then the area is not inside the path and the browser will not populate it.

You can see how the "non-0 surround rule" is used in Figure 2-14. The line segment with an arrowhead on the left first passes through the counterclockwise part of the path and then through the clockwise part of the path. This means that its count is 0, so the area from which the segment starts is not in range, and the browser does not populate it when the fill () method is called. However, the remaining two line segments with arrowheads are not counted at 0, so the area where their starting point is located is populated by the browser.

3. Paper-Cut effect

Let's use the knowledge of the path, shadow and non 0 surround principle to achieve the paper cutting (cutout) effect as shown in Figure 2-15.

Figure 2-15 Paper-cut effect with two circles

The application shown in Figure 2-15, whose JavaScript code is listed in listing 2-10 of the program.

This JavaScript code creates a path that consists of two circles, one of which is inside the other. By setting the last parameter value of the arc () method, the application draws the inner circle in clockwise direction, and the outer circle is drawn counterclockwise. The drawing effect is shown above figure 2-16.

Figure 2-16 using "non-0 wrapping rules" to achieve paper-cut effect

After you create a good path, the application in Figure 2-15 fills the path. The browser uses "non 0 surround rule" to fill the outer circle inside, but the range of filling does not include the inside circle, which produces a kind of paper-cut pattern effect. You can also use this technique to cut out any shapes you want.

Program Listing 2-10 Figure 2-15 JavaScript code for the application

var Context=document.getelementbyid ("Canvas"). GetContext ("2d");
functions ... function DrawGrid (color,stepx,stepy) {
//listing omitted for brevity. Example 2.13
//for a complete listing.
function Drawtwoarcs () {
context.beginpath ();
Context.arc (300,190,150,0,math.pi*2,false);//OUTER:CCW
Context.arc (300,190,100,0,math.pi*2,true);//Inner: CW
Context.fill ();
context.shadowcolor=undefined;
context.shadowoffsetx=0;
context.shadowoffsety=0;
Context.stroke ();
function Draw () {
context.clearrect (0,0,context.canvas.width,
context.canvas.height);
}
}
DrawGrid ("Lightgray", 10,10);
Context.save ();
Context.shadowcolor= "Rgba (0,0,0,0.8)";
context.shadowoffsetx=12;
context.shadowoffsety=12;
context.shadowblur=15;
Drawtwoarcs ();
Context.restore ();
}
initialization ... Context.fillstyle= "Rgba (100,140,230,0.5)";
Context.strokestyle=context.fillstyle;
Draw ();