4b7eb2f04a
* Add IDs to elements - Move round rect function within the renderer * Generate IDs using nanoid * If element ID does not exist, add the ID during restoration
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
/**
|
|
* 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 function 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();
|
|
}
|