HTML and CSS Reference
In-Depth Information
n
Note
Without going into too much detail,
control points
are special points attached to a curve that are used to
alter the curve's shape and angle. Stretching a control point changes the shape of a curve, whereas rotating a
control point changes the curve's angle.
The
arcTo()
method comes in handy for drawing rounded rectangles. Listing 4-6 shows how.
Listing 4-6.
Using the
arcTo()
Method
var canvas = $("#MyCanvas").get(0);
var context = canvas.getContext("2d");
var x = 25;
var y = 50;
var width = 150;
var height = 100;
var radius = 20;
context.lineWidth = 10;
// top and top right corner
context.moveTo(x + radius, y);
context.arcTo(x + width, y, x + width, y + radius, radius);
// right side and bottom right corner
context.arcTo(x + width, y + height, x + width - radius, y + height, radius);
// bottom and bottom left corner
context.arcTo(x, y + height, x, y + height - radius, radius);
// left and top left corner
context.arcTo(x, y, x + radius, y, radius);
context.stroke();
This code calls the
arcTo()
method four times. The first call draws the top edge and upper-right
corner of the rectangle. The second call draws the right edge and lower-right corner. The third call draws
the bottom edge and lower-left corner. Finally, the fourth call draws the left edge and upper-left corner.
Figure 4-9 shows how the rounded rectangle looks at runtime.
Figure 4-9.
Drawing a rounded rectangle using the
arcTo()
method
