change property name and order to match css spec

Author: tr1stan

CHANGELOG.md

@@ -15,7 +15,7 @@
 - Replace outdated jpeg-exif with minimal implementation
 - Replace outdated crypto-js with maintained small alternatives
 - Fix issue with indentation with `indentAllLines: true` when a new page is created
-- Extend cornerRadius param to accept an array of radii
+- Extend `roundedRect` with `borderRadius` as number for all corners or per-corner array (CSS order)
 
 ### [v0.17.2] - 2025-08-30
 

docs/vector.md

@@ -57,14 +57,15 @@ PDFKit also includes some helpers that make defining common shapes much
 easier. Here is a list of the helpers.
 
 * `rect(x, y, width, height)`
-* `roundedRect(x, y, width, height, cornerRadius)`
+* `roundedRect(x, y, width, height, borderRadius)`
 * `ellipse(centerX, centerY, radiusX, radiusY = radiusX)`
 * `circle(centerX, centerY, radius)`
 * `polygon(points...)`
 
-`roundedRect` `cornerRadius` param accepts a single radius (number) or per-corner radii (array).
-If an array, the order is: `[topRight, bottomRight, bottomLeft, topLeft]`.
-For example, to round only the right side corners: `roundedRect(x, y, w, h, [20, 20, 0, 0])`.
+`roundedRect` `borderRadius` accepts a single radius (number) or per-corner radii (array).
+If an array with four values, the order matches CSS `border-radius`:
+`/* top-left | top-right | bottom-right | bottom-left */`
+For example, to round only the right-side corners: `roundedRect(x, y, w, h, [0, 20, 20, 0])`.
 
 The last one, `polygon`, allows you to pass in a list of points (arrays of x,y
 pairs), and it will create the shape by moving to the first point, and then

lib/mixins/vector.js

@@ -113,31 +113,27 @@ export default {
   },
 
   /**
-   * @param {number|number[]} cornerRadius - Corner radius (number) or per-corner radii (array).
-   * If an array, order is: top-right, bottom-right, bottom-left, top-left.
+   * @param {number|number[]} borderRadius - Radius (number) or per-corner radii (array).
+   * If an array, order matches CSS `border-radius` with four values:
+   * top-left, top-right, bottom-right, bottom-left.
    */
-  roundedRect(x, y, w, h, cornerRadius) {
-    if (cornerRadius == null) {
-      cornerRadius = 0;
+  roundedRect(x, y, w, h, borderRadius) {
+    if (borderRadius == null) {
+      borderRadius = 0;
     }
 
     let radii;
-    if (Array.isArray(cornerRadius)) {
-      radii = cornerRadius.slice(0, 4);
+    if (Array.isArray(borderRadius)) {
+      radii = borderRadius.slice(0, 4);
     } else {
-      radii = [
-        cornerRadius, // top-right
-        cornerRadius, // bottom-right
-        cornerRadius, // bottom-left
-        cornerRadius, // top-left
-      ];
+      radii = [borderRadius, borderRadius, borderRadius, borderRadius];
     }
 
     const limit = Math.min(0.5 * w, 0.5 * h);
-    const rTR = Math.max(0, Math.min(radii[0] || 0, limit));
-    const rBR = Math.max(0, Math.min(radii[1] || 0, limit));
-    const rBL = Math.max(0, Math.min(radii[2] || 0, limit));
-    const rTL = Math.max(0, Math.min(radii[3] || 0, limit));
+    const rTL = Math.max(0, Math.min(radii[0] || 0, limit));
+    const rTR = Math.max(0, Math.min(radii[1] || 0, limit));
+    const rBR = Math.max(0, Math.min(radii[2] || 0, limit));
+    const rBL = Math.max(0, Math.min(radii[3] || 0, limit));
 
     const cpTR = rTR * (1.0 - KAPPA);
     const cpBR = rBR * (1.0 - KAPPA);

tests/unit/vector.spec.js

@@ -178,7 +178,7 @@ describe('Vector Graphics', () => {
   });
 
   describe('roundedRect', () => {
-    test('uses cornerRadius to draw rounded corners by default', () => {
+    test('uses borderRadius to draw rounded corners by default', () => {
       const docData = logData(document);
 
       document.roundedRect(50, 50, 100, 80, 20).stroke();
@@ -197,7 +197,7 @@ describe('Vector Graphics', () => {
       expect(streamString).toMatch(/\sc[\s\n]/);
     });
 
-    test('cornerRadius array can disable rounded corners', () => {
+    test('borderRadius array can disable rounded corners', () => {
       const docData = logData(document);
 
       document.roundedRect(50, 50, 100, 80, [0, 0, 0, 0]).stroke();
@@ -224,8 +224,8 @@ describe('Vector Graphics', () => {
       const w = 30;
       const r = 5;
 
-      // Only the top-right corner is rounded
-      document.roundedRect(x, y, w, 40, [r, 0, 0, 0]).stroke();
+      // Only the top-right corner is rounded (CSS order: TL, TR, BR, BL)
+      document.roundedRect(x, y, w, 40, [0, r, 0, 0]).stroke();
       document.end();
 
       const objects = getObjects(docData);