HTML and CSS Reference
In-Depth Information
Example 2-3. Line cap and join
function drawScreen() {
// Sample 1: round end, bevel join, at top left of canvas
context.strokeStyle = "black"; //need list of available colors
context.lineWidth = 10;
context.lineJoin = 'bevel';
context.lineCap = 'round';
context.beginPath();
context.moveTo(0, 0);
context.lineTo(25, 0);
context.lineTo(25,25);
context.stroke();
context.closePath();
// Sample 2: round end, bevel join, not at top or left of canvas
context.beginPath();
context.moveTo(10, 50);
context.lineTo(35, 50);
context.lineTo(35,75);
context.stroke();
context.closePath();
// Sample 3: flat end, round join, not at top or left of canvas
context.lineJoin = 'round';
context.lineCap = 'butt';
context.beginPath();
context.moveTo(10, 100);
context.lineTo(35, 100);
context.lineTo(35,125);
context.stroke();
context.closePath();
}
Figure 2-3. Line cap and join
These three line and join samples should help illustrate some of the combinations of
attributes we can use to draw paths on the canvas.
The first sample attempts to draw starting at the top left of the canvas, resulting in a
strange image. Canvas paths are drawn outward in both the
x
and
y
directions from
the center of the pixel it begins on. For this reason, the top line in Sample 1 seems to
be thinner than the 10 pixels we specified. In addition, the “round” end of the top-left
horizontal line segment cannot be seen because both of these were drawn off the screen
