Drawing rounded rectangles

Drawing rounded rectangles: the arcTo(x1, y1, x2, y2, radius) method

 

There is another method called ctx.arcTo(x1, y1, x2, y2, radius), which is a bit complex to use, but very practical for drawing rounded rectangles.

In fact, the arcTo(…) method draws an arc of a circle depending on some tangents. Let’s look at these pictures for a better understanding (original picture from http://www.dbp-consulting.com/tutorials/canvas/CanvasArcTo.html):

  1. ctx.moveTo(x0, y0);
  2. ctx.arcTo(x1, y1, x2, y2, radius);

EXAMPLE 1: SIMPLE USE

 

  1. context.beginPath();
  2. context.moveTo(0, 20);
  3. context.arcTo(100, 100, 200, 20, 50);
  4. context.lineWidth = 5;
  5. context.strokeStyle = “#0000ff”;
  6. context.stroke();

EXAMPLE 2: DRAW A ROUNDED RECTANGLE

Try this interactive example: http://jsbin.com/kuqalu/1/edit

Source code:

  1. var roundedRect=function(ctx,x,y,width,height,radius,fill,stroke) {
  2.     ctx.beginPath();
  3.    // draw top and top right corner
  4.    ctx.moveTo(x+radius,y);
  5.    ctx.arcTo(x+width,y,x+width,y+radius,radius);
  6.    // draw right side and bottom right corner
  7.    ctx.arcTo(x+width,y+height,x+widthradius,y+height,radius);
  8.    // draw bottom and bottom left corner
  9.    ctx.arcTo(x,y+height,x,y+heightradius,radius);
  10.    // draw left and top left corner
  11.    ctx.arcTo(x,y,x+radius,y,radius);
  12.    if(fill) {
  13.       ctx.fill();
  14.    }
  15.    if(stroke){
  16.       ctx.stroke();
  17.    }
  18. }
  19. var canvas document.getElementById(‘myCanvas’);
  20. var ctx    canvas.getContext(‘2d’);
  21. ctx.strokeStyle ‘rgb(150,0,0)’;
  22. ctx.fillStyle   ‘rgb(0,150,0)’;
  23. ctx.lineWidth   7;
  24. roundedRect(ctx151516012020truetrue);

EXAMPLE 3 COMPARISON BETWEEN LINETO AND ARCTO

This example at JS Bin is the same as the previous one, except that we added at the end of the roundedRect function the same lines of code that draw the rounded rectangle, but using lineTo instead of arcTo. Just take a look!

JS Bin example

lineTo vs arcTo

Example 4: use the unrounded vertices in arcTo

For drawing a rounded square, this code also works:

  1. ctx.moveTo(x+radiusy);
  2. ctx.arcTo(x+widthy,x+widthy+heightradius);
  3. ctx.arcTo(x+widthy+heightxy+heightradius); 
  4. ctx.arcTo(xy+heightxy,radius);
  5. ctx.arcTo(xyx+widthy,radius);

which might be easier than trying to figure out where the arc will end like this:

  1. ctx.moveTo(x+radiusy);
  2. ctx.arcTo(x+widthyx+widthy+radiusradius);
  3. ctx.arcTo(x+widthy+heightx+widthradiusy+height,radius); 
  4. ctx.arcTo(xy+heightxy+heightradiusradius);
  5. ctx.arcTo(xyx+radiusy,radius);

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s