Untitled

dabblet.css

.rounded {
	width:100px;
	height:100px;
	border: 1px solid black;
	border-radius:30px;
}

dabblet.html

<div class="rounded"></div>
<canvas id="rounded-rect" width="600" height="600">
</canvas>

dabblet.js

CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius, fill, stroke) {
    if (typeof stroke == "undefined") {
        stroke = true;
    }
    if (typeof radius === "undefined") {
        radius = 5;
    }
    this.beginPath();
    this.moveTo(x + radius, y);
    this.lineTo(x + width - radius, y);
    this.quadraticCurveTo(x + width, y, x + width, y + radius);
    this.lineTo(x + width, y + height - radius);
    this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    this.lineTo(x + radius, y + height);
    this.quadraticCurveTo(x, y + height, x, y + height - radius);
    this.lineTo(x, y + radius);
    this.quadraticCurveTo(x, y, x + radius, y);
    this.closePath();
    if (stroke) {
        this.stroke(stroke);
    }
    if (fill) {
        this.fill(fill);
    }
};

CanvasRenderingContext2D.prototype.ubuntu = function(x, y, width, height, radius) {
  var bezierR = radius-10;
  this.beginPath();
  this.moveTo(x+radius-5, y-1);
  this.bezierCurveTo(x+(width/4)+radius, y-4, x+width-(width/4)-radius, y-4, x+width-bezierR, y);//TR
  this.quadraticCurveTo(x + width, y, x + width, y + radius);
  this.bezierCurveTo(x+width+4, y+(height/4), x+width+4, y+height-(height/4), x+width, y+height-bezierR);//BR
  this.quadraticCurveTo(x + width, y+height, x + width-radius, y + height);
  this.bezierCurveTo(x+width-(width/4), y+height+4, x+(width/4), y+height+4, x+bezierR, y+height);//BL
  this.quadraticCurveTo(x, y+height, x, y + height - radius);
  this.bezierCurveTo(x-4, y+height-(height/4), x-4, y+(height/4), x, y+bezierR);//TL
  this.quadraticCurveTo(x, y, x+radius-5, y-1);  
  this.closePath();
  this.stroke(true);
};


// Now you can just call
var ctx = document.getElementById("rounded-rect").getContext("2d");
// Draw using default border radius, 
// stroke it but no fill (function's default values)
ctx.ubuntu(100, 40, 100, 100, 21);

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}