diff --git a/lib/mixins/vector.coffee b/lib/mixins/vector.coffee index 9e8cf90..ee134ee 100644 --- a/lib/mixins/vector.coffee +++ b/lib/mixins/vector.coffee @@ -71,15 +71,21 @@ module.exports = @addContent "#{x} #{y} #{w} #{h} re" roundedRect: (x, y, w, h, r = 0) -> + r = Math.min(r, 0.5 * w, 0.5 * h) + + # amount to inset control points from corners (see `ellipse`) + c = r * (1.0 - KAPPA) + @moveTo x + r, y @lineTo x + w - r, y - @quadraticCurveTo x + w, y, x + w, y + r + @bezierCurveTo x + w - c, y, x + w, y + c, x + w, y + r @lineTo x + w, y + h - r - @quadraticCurveTo x + w, y + h, x + w - r, y + h + @bezierCurveTo x + w, y + h - c, x + w - c, y + h, x + w - r, y + h @lineTo x + r, y + h - @quadraticCurveTo x, y + h, x, y + h - r + @bezierCurveTo x + c, y + h, x, y + h - c, x, y + h - r @lineTo x, y + r - @quadraticCurveTo x, y, x + r, y + @bezierCurveTo x, y + c, x + c, y, x + r, y + @closePath() ellipse: (x, y, r1, r2 = r1) -> # based on http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas/2173084#2173084