12345678910111213141516171819202122232425262728293031323334353637 |
- /**
- * 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
- */
- export const roundRect = (
- context: CanvasRenderingContext2D,
- x: number,
- y: number,
- width: number,
- height: number,
- radius: number,
- ) => {
- 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,
- y + height,
- );
- 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();
- context.stroke();
- };
|