用于绘制类似webkit的圆形边框的数学公式

Question

在画布中，我想以与webkit-base（谷歌浏览器）浏览器相同的方式绘制圆角。例如在css中，我可以像这样定义div：

div {
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  border-radius: 30px;
  border-top: 5px solid blue;
  border-left: 20px solid green;
}

现场示例在这里：http://jsfiddle.net/fHmt9/

如何在画布中从此示例中绘制绿色边框？什么是数学公式？