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);
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
Search WWH ::

Custom Search