function drawRoundedRect(ctx, x, y, width, height, r) {
  ctx.save();
  ctx.beginPath();

  // draw top and top right corner
  ctx.moveTo(x + r, y);
  ctx.arcTo(x + width, y, x + width, y + r, r);

  // draw right side and bottom right corner
  ctx.arcTo(x + width, y + height, x + width - r, y + height, r);

  // draw bottom and bottom left corner
  ctx.arcTo(x, y + height, x, y + height - r, r);

  // draw left and top left corner
  ctx.arcTo(x, y, x + r, y, r);

  ctx.fill();
  ctx.stroke();

  ctx.restore();
}
var canvas = document.getElementById('canvas');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  drawRoundedRect(ctx, 20, 20, 100, 100, 10);
}