Created
March 13, 2017 23:56
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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