Skip to content

Instantly share code, notes, and snippets.

@sam-g-steel
Created March 13, 2017 23:56
Show Gist options
  • Save sam-g-steel/6bea3c2294088641d86e4b4a39f10768 to your computer and use it in GitHub Desktop.
Save sam-g-steel/6bea3c2294088641d86e4b4a39f10768 to your computer and use it in GitHub Desktop.
Draws a rounded rectangle using the current state of the canvas
CanvasRenderingContext2D.prototype.roundRect =
/**
* Draws a rounded rectangle using the current state of the canvas.
* If you omit the last three params, it will draw a rectangle
* outline with a 5 pixel border radius
* @param {CanvasRenderingContext2D} ctx
* @param {Number} x The top left x coordinate
* @param {Number} y The top left y coordinate
* @param {Number} width The width of the rectangle
* @param {Number} height The height of the rectangle
* @param {Number} radius The corner radius. Defaults to 5;
* @param {Boolean} fill Whether to fill the rectangle. Defaults to false.
* @param {Boolean} stroke Whether to stroke the rectangle. Defaults to true.
*/
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 (fill) {
this.fill();
}
if (stroke) {
this.stroke();
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment