HTML5 Guidelines for Web Developers

5.5 Paths 123

Figure 5.11 Four different rectangles with rounded corners; the circle is an extreme example
of a rounded rectangle

var roundedRect = function(x,y,w,h,r) {
context.beginPath();
context.moveTo(x,y+r);
context.arcTo(x,y,x+w,y,r);
context.arcTo(x+w,y,x+w,y+h,r);
context.arcTo(x+w,y+h,x,y+h,r);
context.arcTo(x,y+h,x,y,r);
context.closePath();
context.stroke();
};
roundedRect(100,100,700,500,60);
roundedRect(900,150,160,160,80);
roundedRect(700,400,400,300,40);
roundedRect(150,650,400,80,10);

The function roundedRect() requires the basic values for the rectangle plus the
radius for rounding. It then draws the desired rectangle with a moveTo() method,
four arcTo() methods, and a closePath() method. You have not yet encountered
the method closePath(): It closes the rectangle by joining the last point back up
to the start point.