You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
5 years ago
|
/**
|
||
|
* https://stackoverflow.com/a/3368118
|
||
|
* Draws a rounded rectangle using the current state of the canvas.
|
||
|
* @param {CanvasRenderingContext2D} context
|
||
|
* @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
|
||
|
*/
|
||
5 years ago
|
export const roundRect = (
|
||
5 years ago
|
context: CanvasRenderingContext2D,
|
||
|
x: number,
|
||
|
y: number,
|
||
|
width: number,
|
||
|
height: number,
|
||
5 years ago
|
radius: number,
|
||
2 years ago
|
strokeColor?: string,
|
||
5 years ago
|
) => {
|
||
5 years ago
|
context.beginPath();
|
||
|
context.moveTo(x + radius, y);
|
||
|
context.lineTo(x + width - radius, y);
|
||
|
context.quadraticCurveTo(x + width, y, x + width, y + radius);
|
||
|
context.lineTo(x + width, y + height - radius);
|
||
|
context.quadraticCurveTo(
|
||
|
x + width,
|
||
|
y + height,
|
||
|
x + width - radius,
|
||
5 years ago
|
y + height,
|
||
5 years ago
|
);
|
||
|
context.lineTo(x + radius, y + height);
|
||
|
context.quadraticCurveTo(x, y + height, x, y + height - radius);
|
||
|
context.lineTo(x, y + radius);
|
||
|
context.quadraticCurveTo(x, y, x + radius, y);
|
||
|
context.closePath();
|
||
|
context.fill();
|
||
2 years ago
|
if (strokeColor) {
|
||
|
context.strokeStyle = strokeColor;
|
||
|
}
|
||
5 years ago
|
context.stroke();
|
||
5 years ago
|
};
|