draw rounded rectangle canvas js code example
Example: javascript canvas rectangle rounded corners
let canvas = document.getElementById('example');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.roundedRectangle(0, 0, 100, 100, 20);
ctx.stroke();
ctx.beginPath();
ctx.roundedRectangle(5, 5, 90, 90, 15);
ctx.stroke();
CanvasRenderingContext2D.prototype.roundedRectangle = function(x, y, width, height, rounded) {
const radiansInCircle = 2 * Math.PI;
const halfRadians = (2 * Math.PI)/2;
const quarterRadians = (2 * Math.PI)/4;
this.arc(rounded + x, rounded + y, rounded, -quarterRadians, halfRadians, true);
this.lineTo(x, y + height - rounded);
this.arc(rounded + x, height - rounded + y, rounded, halfRadians, quarterRadians, true);
this.lineTo(x + width - rounded, y + height);
this.arc(x + width - rounded, y + height - rounded, rounded, quarterRadians, 0, true);
this.lineTo(x + width, y + rounded);
this.arc(x + width - rounded, y + rounded, rounded, 0, -quarterRadians, true);
this.lineTo(x + rounded, y);
}