css - 绘制类 webkit 圆角边框的数学公式

Question

在画布中，我想以与基于 webkit（谷歌浏览器）浏览器相同的方式绘制圆角。例如在 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/

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