circuit-to-canvas 0.0.37 → 0.0.38

package/dist/index.js

@@ -249,17 +249,252 @@ function drawPolygon(params) {
   ctx.fill();
 }
 
+// lib/drawer/elements/soldermask-margin.ts
+import { applyToPoint as applyToPoint6 } from "transformation-matrix";
+function drawSoldermaskRingForRect(ctx, center, width, height, margin, borderRadius, rotation, realToCanvasMat, soldermaskColor, padColor) {
+  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
+  const scaledWidth = width * Math.abs(realToCanvasMat.a);
+  const scaledHeight = height * Math.abs(realToCanvasMat.a);
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
+  const scaledRadius = borderRadius * Math.abs(realToCanvasMat.a);
+  ctx.save();
+  ctx.translate(cx, cy);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
+  const prevCompositeOp = ctx.globalCompositeOperation;
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = "source-atop";
+  }
+  const outerWidth = scaledWidth;
+  const outerHeight = scaledHeight;
+  const outerRadius = scaledRadius;
+  ctx.beginPath();
+  if (outerRadius > 0) {
+    const x = -outerWidth / 2;
+    const y = -outerHeight / 2;
+    const r = Math.min(outerRadius, outerWidth / 2, outerHeight / 2);
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + outerWidth - r, y);
+    ctx.arcTo(x + outerWidth, y, x + outerWidth, y + r, r);
+    ctx.lineTo(x + outerWidth, y + outerHeight - r);
+    ctx.arcTo(
+      x + outerWidth,
+      y + outerHeight,
+      x + outerWidth - r,
+      y + outerHeight,
+      r
+    );
+    ctx.lineTo(x + r, y + outerHeight);
+    ctx.arcTo(x, y + outerHeight, x, y + outerHeight - r, r);
+    ctx.lineTo(x, y + r);
+    ctx.arcTo(x, y, x + r, y, r);
+  } else {
+    ctx.rect(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight);
+  }
+  ctx.fillStyle = soldermaskColor;
+  ctx.fill();
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  }
+  const innerWidth = scaledWidth - scaledMargin * 2;
+  const innerHeight = scaledHeight - scaledMargin * 2;
+  const innerRadius = Math.max(0, scaledRadius - scaledMargin);
+  if (innerWidth > 0 && innerHeight > 0) {
+    ctx.beginPath();
+    if (innerRadius > 0) {
+      const x = -innerWidth / 2;
+      const y = -innerHeight / 2;
+      const r = Math.min(innerRadius, innerWidth / 2, innerHeight / 2);
+      ctx.moveTo(x + r, y);
+      ctx.lineTo(x + innerWidth - r, y);
+      ctx.arcTo(x + innerWidth, y, x + innerWidth, y + r, r);
+      ctx.lineTo(x + innerWidth, y + innerHeight - r);
+      ctx.arcTo(
+        x + innerWidth,
+        y + innerHeight,
+        x + innerWidth - r,
+        y + innerHeight,
+        r
+      );
+      ctx.lineTo(x + r, y + innerHeight);
+      ctx.arcTo(x, y + innerHeight, x, y + innerHeight - r, r);
+      ctx.lineTo(x, y + r);
+      ctx.arcTo(x, y, x + r, y, r);
+    } else {
+      ctx.rect(-innerWidth / 2, -innerHeight / 2, innerWidth, innerHeight);
+    }
+    ctx.fillStyle = padColor;
+    ctx.fill();
+  }
+  ctx.restore();
+}
+function drawSoldermaskRingForCircle(ctx, center, radius, margin, realToCanvasMat, soldermaskColor, padColor) {
+  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
+  const scaledRadius = radius * Math.abs(realToCanvasMat.a);
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
+  ctx.save();
+  const prevCompositeOp = ctx.globalCompositeOperation;
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = "source-atop";
+  }
+  ctx.beginPath();
+  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+  ctx.fillStyle = soldermaskColor;
+  ctx.fill();
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  }
+  const innerRadius = Math.max(0, scaledRadius - scaledMargin);
+  if (innerRadius > 0) {
+    ctx.beginPath();
+    ctx.arc(cx, cy, innerRadius, 0, Math.PI * 2);
+    ctx.fillStyle = padColor;
+    ctx.fill();
+  }
+  ctx.restore();
+}
+function drawSoldermaskRingForPill(ctx, center, width, height, margin, rotation, realToCanvasMat, soldermaskColor, padColor) {
+  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
+  const scaledWidth = width * Math.abs(realToCanvasMat.a);
+  const scaledHeight = height * Math.abs(realToCanvasMat.a);
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
+  ctx.save();
+  ctx.translate(cx, cy);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
+  const prevCompositeOp = ctx.globalCompositeOperation;
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = "source-atop";
+  }
+  const outerWidth = scaledWidth;
+  const outerHeight = scaledHeight;
+  ctx.beginPath();
+  if (outerWidth > outerHeight) {
+    const radius = outerHeight / 2;
+    const straightLength = outerWidth - outerHeight;
+    ctx.moveTo(-straightLength / 2, -radius);
+    ctx.lineTo(straightLength / 2, -radius);
+    ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
+    ctx.lineTo(-straightLength / 2, radius);
+    ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
+  } else if (outerHeight > outerWidth) {
+    const radius = outerWidth / 2;
+    const straightLength = outerHeight - outerWidth;
+    ctx.moveTo(radius, -straightLength / 2);
+    ctx.lineTo(radius, straightLength / 2);
+    ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
+    ctx.lineTo(-radius, -straightLength / 2);
+    ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
+  } else {
+    ctx.arc(0, 0, outerWidth / 2, 0, Math.PI * 2);
+  }
+  ctx.fillStyle = soldermaskColor;
+  ctx.fill();
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  }
+  const innerWidth = scaledWidth - scaledMargin * 2;
+  const innerHeight = scaledHeight - scaledMargin * 2;
+  if (innerWidth > 0 && innerHeight > 0) {
+    ctx.beginPath();
+    if (innerWidth > innerHeight) {
+      const radius = innerHeight / 2;
+      const straightLength = innerWidth - innerHeight;
+      ctx.moveTo(-straightLength / 2, -radius);
+      ctx.lineTo(straightLength / 2, -radius);
+      ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
+      ctx.lineTo(-straightLength / 2, radius);
+      ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
+    } else if (innerHeight > innerWidth) {
+      const radius = innerWidth / 2;
+      const straightLength = innerHeight - innerWidth;
+      ctx.moveTo(radius, -straightLength / 2);
+      ctx.lineTo(radius, straightLength / 2);
+      ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
+      ctx.lineTo(-radius, -straightLength / 2);
+      ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
+    } else {
+      ctx.arc(0, 0, innerWidth / 2, 0, Math.PI * 2);
+    }
+    ctx.fillStyle = padColor;
+    ctx.fill();
+  }
+  ctx.restore();
+}
+function drawSoldermaskRingForOval(ctx, center, radius_x, radius_y, margin, rotation, realToCanvasMat, soldermaskColor, holeColor) {
+  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
+  const scaledRadiusX = radius_x * Math.abs(realToCanvasMat.a);
+  const scaledRadiusY = radius_y * Math.abs(realToCanvasMat.a);
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
+  ctx.save();
+  ctx.translate(cx, cy);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
+  const prevCompositeOp = ctx.globalCompositeOperation;
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = "source-atop";
+  }
+  ctx.beginPath();
+  ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2);
+  ctx.fillStyle = soldermaskColor;
+  ctx.fill();
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  }
+  const innerRadiusX = Math.max(0, scaledRadiusX - scaledMargin);
+  const innerRadiusY = Math.max(0, scaledRadiusY - scaledMargin);
+  if (innerRadiusX > 0 && innerRadiusY > 0) {
+    ctx.beginPath();
+    ctx.ellipse(0, 0, innerRadiusX, innerRadiusY, 0, 0, Math.PI * 2);
+    ctx.fillStyle = holeColor;
+    ctx.fill();
+  }
+  ctx.restore();
+}
+
 // lib/drawer/elements/pcb-plated-hole.ts
+function getSoldermaskColor(layers, colorMap) {
+  const layer = layers?.includes("top") ? "top" : "bottom";
+  return colorMap.soldermaskOverCopper[layer] ?? colorMap.soldermaskOverCopper.top;
+}
 function drawPcbPlatedHole(params) {
   const { ctx, hole, realToCanvasMat, colorMap } = params;
+  const hasSoldermask = hole.is_covered_with_solder_mask === true && hole.soldermask_margin !== void 0 && hole.soldermask_margin !== 0;
+  const margin = hasSoldermask ? hole.soldermask_margin : 0;
+  const soldermaskRingColor = getSoldermaskColor(hole.layers, colorMap);
+  const positiveMarginColor = colorMap.substrate;
+  const copperColor = colorMap.copper.top;
   if (hole.shape === "circle") {
+    if (hasSoldermask && margin > 0) {
+      drawCircle({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        radius: hole.outer_diameter / 2 + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat
+      });
+    }
     drawCircle({
       ctx,
       center: { x: hole.x, y: hole.y },
       radius: hole.outer_diameter / 2,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat
     });
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForCircle(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.outer_diameter / 2,
+        margin,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor
+      );
+    }
     drawCircle({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -270,15 +505,39 @@ function drawPcbPlatedHole(params) {
     return;
   }
   if (hole.shape === "oval") {
+    if (hasSoldermask && margin > 0) {
+      drawOval({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        radius_x: hole.outer_width / 2 + margin,
+        radius_y: hole.outer_height / 2 + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        rotation: hole.ccw_rotation
+      });
+    }
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
       radius_x: hole.outer_width / 2,
       radius_y: hole.outer_height / 2,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       rotation: hole.ccw_rotation
     });
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForOval(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.outer_width / 2,
+        hole.outer_height / 2,
+        margin,
+        hole.ccw_rotation ?? 0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor
+      );
+    }
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -291,15 +550,39 @@ function drawPcbPlatedHole(params) {
     return;
   }
   if (hole.shape === "pill") {
+    if (hasSoldermask && margin > 0) {
+      drawPill({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.outer_width + margin * 2,
+        height: hole.outer_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        rotation: hole.ccw_rotation
+      });
+    }
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
       width: hole.outer_width,
       height: hole.outer_height,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       rotation: hole.ccw_rotation
     });
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForPill(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.outer_width,
+        hole.outer_height,
+        margin,
+        hole.ccw_rotation ?? 0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor
+      );
+    }
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -312,15 +595,40 @@ function drawPcbPlatedHole(params) {
     return;
   }
   if (hole.shape === "circular_hole_with_rect_pad") {
+    if (hasSoldermask && margin > 0) {
+      drawRect({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.rect_pad_width + margin * 2,
+        height: hole.rect_pad_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        borderRadius: (hole.rect_border_radius ?? 0) + margin
+      });
+    }
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       borderRadius: hole.rect_border_radius ?? 0
     });
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForRect(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.rect_pad_width,
+        hole.rect_pad_height,
+        margin,
+        hole.rect_border_radius ?? 0,
+        0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor
+      );
+    }
     const holeX = hole.x + (hole.hole_offset_x ?? 0);
     const holeY = hole.y + (hole.hole_offset_y ?? 0);
     drawCircle({
@@ -333,15 +641,40 @@ function drawPcbPlatedHole(params) {
     return;
   }
   if (hole.shape === "pill_hole_with_rect_pad") {
+    if (hasSoldermask && margin > 0) {
+      drawRect({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.rect_pad_width + margin * 2,
+        height: hole.rect_pad_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        borderRadius: (hole.rect_border_radius ?? 0) + margin
+      });
+    }
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       borderRadius: hole.rect_border_radius ?? 0
     });
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForRect(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.rect_pad_width,
+        hole.rect_pad_height,
+        margin,
+        hole.rect_border_radius ?? 0,
+        0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor
+      );
+    }
     const holeX = hole.x + (hole.hole_offset_x ?? 0);
     const holeY = hole.y + (hole.hole_offset_y ?? 0);
     drawPill({
@@ -355,16 +688,42 @@ function drawPcbPlatedHole(params) {
     return;
   }
   if (hole.shape === "rotated_pill_hole_with_rect_pad") {
+    if (hasSoldermask && margin > 0) {
+      drawRect({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.rect_pad_width + margin * 2,
+        height: hole.rect_pad_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        borderRadius: (hole.rect_border_radius ?? 0) + margin,
+        rotation: hole.rect_ccw_rotation
+      });
+    }
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       borderRadius: hole.rect_border_radius ?? 0,
       rotation: hole.rect_ccw_rotation
     });
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForRect(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.rect_pad_width,
+        hole.rect_pad_height,
+        margin,
+        hole.rect_border_radius ?? 0,
+        hole.rect_ccw_rotation ?? 0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor
+      );
+    }
     const holeX = hole.x + (hole.hole_offset_x ?? 0);
     const holeY = hole.y + (hole.hole_offset_y ?? 0);
     drawPill({
@@ -388,7 +747,7 @@ function drawPcbPlatedHole(params) {
       drawPolygon({
         ctx,
         points: padPoints,
-        fill: colorMap.copper.top,
+        fill: copperColor,
         realToCanvasMat
       });
     }
@@ -589,217 +948,11 @@ function drawPcbHole(params) {
   }
 }
 
-// lib/drawer/elements/soldermask-margin.ts
-import { applyToPoint as applyToPoint6 } from "transformation-matrix";
-function drawSoldermaskRingForRect(ctx, center, width, height, margin, borderRadius, rotation, realToCanvasMat, soldermaskColor, padColor) {
-  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
-  const scaledWidth = width * Math.abs(realToCanvasMat.a);
-  const scaledHeight = height * Math.abs(realToCanvasMat.a);
-  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
-  const scaledRadius = borderRadius * Math.abs(realToCanvasMat.a);
-  ctx.save();
-  ctx.translate(cx, cy);
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180));
-  }
-  const prevCompositeOp = ctx.globalCompositeOperation;
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = "source-atop";
-  }
-  const outerWidth = scaledWidth;
-  const outerHeight = scaledHeight;
-  const outerRadius = scaledRadius;
-  ctx.beginPath();
-  if (outerRadius > 0) {
-    const x = -outerWidth / 2;
-    const y = -outerHeight / 2;
-    const r = Math.min(outerRadius, outerWidth / 2, outerHeight / 2);
-    ctx.moveTo(x + r, y);
-    ctx.lineTo(x + outerWidth - r, y);
-    ctx.arcTo(x + outerWidth, y, x + outerWidth, y + r, r);
-    ctx.lineTo(x + outerWidth, y + outerHeight - r);
-    ctx.arcTo(
-      x + outerWidth,
-      y + outerHeight,
-      x + outerWidth - r,
-      y + outerHeight,
-      r
-    );
-    ctx.lineTo(x + r, y + outerHeight);
-    ctx.arcTo(x, y + outerHeight, x, y + outerHeight - r, r);
-    ctx.lineTo(x, y + r);
-    ctx.arcTo(x, y, x + r, y, r);
-  } else {
-    ctx.rect(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight);
-  }
-  ctx.fillStyle = soldermaskColor;
-  ctx.fill();
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
-  }
-  const innerWidth = scaledWidth - scaledMargin * 2;
-  const innerHeight = scaledHeight - scaledMargin * 2;
-  const innerRadius = Math.max(0, scaledRadius - scaledMargin);
-  if (innerWidth > 0 && innerHeight > 0) {
-    ctx.beginPath();
-    if (innerRadius > 0) {
-      const x = -innerWidth / 2;
-      const y = -innerHeight / 2;
-      const r = Math.min(innerRadius, innerWidth / 2, innerHeight / 2);
-      ctx.moveTo(x + r, y);
-      ctx.lineTo(x + innerWidth - r, y);
-      ctx.arcTo(x + innerWidth, y, x + innerWidth, y + r, r);
-      ctx.lineTo(x + innerWidth, y + innerHeight - r);
-      ctx.arcTo(
-        x + innerWidth,
-        y + innerHeight,
-        x + innerWidth - r,
-        y + innerHeight,
-        r
-      );
-      ctx.lineTo(x + r, y + innerHeight);
-      ctx.arcTo(x, y + innerHeight, x, y + innerHeight - r, r);
-      ctx.lineTo(x, y + r);
-      ctx.arcTo(x, y, x + r, y, r);
-    } else {
-      ctx.rect(-innerWidth / 2, -innerHeight / 2, innerWidth, innerHeight);
-    }
-    ctx.fillStyle = padColor;
-    ctx.fill();
-  }
-  ctx.restore();
-}
-function drawSoldermaskRingForCircle(ctx, center, radius, margin, realToCanvasMat, soldermaskColor, padColor) {
-  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
-  const scaledRadius = radius * Math.abs(realToCanvasMat.a);
-  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
-  ctx.save();
-  const prevCompositeOp = ctx.globalCompositeOperation;
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = "source-atop";
-  }
-  ctx.beginPath();
-  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
-  ctx.fillStyle = soldermaskColor;
-  ctx.fill();
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
-  }
-  const innerRadius = Math.max(0, scaledRadius - scaledMargin);
-  if (innerRadius > 0) {
-    ctx.beginPath();
-    ctx.arc(cx, cy, innerRadius, 0, Math.PI * 2);
-    ctx.fillStyle = padColor;
-    ctx.fill();
-  }
-  ctx.restore();
-}
-function drawSoldermaskRingForPill(ctx, center, width, height, margin, rotation, realToCanvasMat, soldermaskColor, padColor) {
-  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
-  const scaledWidth = width * Math.abs(realToCanvasMat.a);
-  const scaledHeight = height * Math.abs(realToCanvasMat.a);
-  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
-  ctx.save();
-  ctx.translate(cx, cy);
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180));
-  }
-  const prevCompositeOp = ctx.globalCompositeOperation;
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = "source-atop";
-  }
-  const outerWidth = scaledWidth;
-  const outerHeight = scaledHeight;
-  ctx.beginPath();
-  if (outerWidth > outerHeight) {
-    const radius = outerHeight / 2;
-    const straightLength = outerWidth - outerHeight;
-    ctx.moveTo(-straightLength / 2, -radius);
-    ctx.lineTo(straightLength / 2, -radius);
-    ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
-    ctx.lineTo(-straightLength / 2, radius);
-    ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
-  } else if (outerHeight > outerWidth) {
-    const radius = outerWidth / 2;
-    const straightLength = outerHeight - outerWidth;
-    ctx.moveTo(radius, -straightLength / 2);
-    ctx.lineTo(radius, straightLength / 2);
-    ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
-    ctx.lineTo(-radius, -straightLength / 2);
-    ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
-  } else {
-    ctx.arc(0, 0, outerWidth / 2, 0, Math.PI * 2);
-  }
-  ctx.fillStyle = soldermaskColor;
-  ctx.fill();
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
-  }
-  const innerWidth = scaledWidth - scaledMargin * 2;
-  const innerHeight = scaledHeight - scaledMargin * 2;
-  if (innerWidth > 0 && innerHeight > 0) {
-    ctx.beginPath();
-    if (innerWidth > innerHeight) {
-      const radius = innerHeight / 2;
-      const straightLength = innerWidth - innerHeight;
-      ctx.moveTo(-straightLength / 2, -radius);
-      ctx.lineTo(straightLength / 2, -radius);
-      ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
-      ctx.lineTo(-straightLength / 2, radius);
-      ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
-    } else if (innerHeight > innerWidth) {
-      const radius = innerWidth / 2;
-      const straightLength = innerHeight - innerWidth;
-      ctx.moveTo(radius, -straightLength / 2);
-      ctx.lineTo(radius, straightLength / 2);
-      ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
-      ctx.lineTo(-radius, -straightLength / 2);
-      ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
-    } else {
-      ctx.arc(0, 0, innerWidth / 2, 0, Math.PI * 2);
-    }
-    ctx.fillStyle = padColor;
-    ctx.fill();
-  }
-  ctx.restore();
-}
-function drawSoldermaskRingForOval(ctx, center, radius_x, radius_y, margin, rotation, realToCanvasMat, soldermaskColor, holeColor) {
-  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
-  const scaledRadiusX = radius_x * Math.abs(realToCanvasMat.a);
-  const scaledRadiusY = radius_y * Math.abs(realToCanvasMat.a);
-  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
-  ctx.save();
-  ctx.translate(cx, cy);
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180));
-  }
-  const prevCompositeOp = ctx.globalCompositeOperation;
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = "source-atop";
-  }
-  ctx.beginPath();
-  ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2);
-  ctx.fillStyle = soldermaskColor;
-  ctx.fill();
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
-  }
-  const innerRadiusX = Math.max(0, scaledRadiusX - scaledMargin);
-  const innerRadiusY = Math.max(0, scaledRadiusY - scaledMargin);
-  if (innerRadiusX > 0 && innerRadiusY > 0) {
-    ctx.beginPath();
-    ctx.ellipse(0, 0, innerRadiusX, innerRadiusY, 0, 0, Math.PI * 2);
-    ctx.fillStyle = holeColor;
-    ctx.fill();
-  }
-  ctx.restore();
-}
-
 // lib/drawer/elements/pcb-smtpad.ts
 function layerToColor(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
-function getSoldermaskColor(layer, colorMap) {
+function getSoldermaskColor2(layer, colorMap) {
   return colorMap.soldermaskOverCopper[layer] ?? colorMap.soldermaskOverCopper.top;
 }
 function drawPcbSmtPad(params) {
@@ -807,7 +960,7 @@ function drawPcbSmtPad(params) {
   const color = layerToColor(pad.layer, colorMap);
   const hasSoldermask = pad.is_covered_with_solder_mask === true && pad.soldermask_margin !== void 0 && pad.soldermask_margin !== 0;
   const margin = hasSoldermask ? pad.soldermask_margin : 0;
-  const soldermaskRingColor = getSoldermaskColor(pad.layer, colorMap);
+  const soldermaskRingColor = getSoldermaskColor2(pad.layer, colorMap);
   const positiveMarginColor = colorMap.substrate;
   if (pad.shape === "rect") {
     if (hasSoldermask && margin > 0) {
@@ -2037,8 +2190,11 @@ var CircuitToCanvasDrawer = class {
     const hasSoldermaskHoles = elements.some(
       (el) => el.type === "pcb_hole" && el.is_covered_with_solder_mask === true
     );
+    const hasSoldermaskPlatedHoles = elements.some(
+      (el) => el.type === "pcb_plated_hole" && el.is_covered_with_solder_mask === true
+    );
     for (const element of elements) {
-      if (element.type === "pcb_board" && (hasSoldermaskPads || hasSoldermaskHoles)) {
+      if (element.type === "pcb_board" && (hasSoldermaskPads || hasSoldermaskHoles || hasSoldermaskPlatedHoles)) {
         this.drawBoardWithSoldermask(element);
       } else {
         this.drawElement(element, options);

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -172,11 +172,17 @@ export class CircuitToCanvasDrawer {
         (el as PcbHole & { is_covered_with_solder_mask?: boolean })
           .is_covered_with_solder_mask === true,
     )
+    const hasSoldermaskPlatedHoles = elements.some(
+      (el) =>
+        el.type === "pcb_plated_hole" &&
+        (el as PcbPlatedHole & { is_covered_with_solder_mask?: boolean })
+          .is_covered_with_solder_mask === true,
+    )
 
     for (const element of elements) {
       if (
         element.type === "pcb_board" &&
-        (hasSoldermaskPads || hasSoldermaskHoles)
+        (hasSoldermaskPads || hasSoldermaskHoles || hasSoldermaskPlatedHoles)
       ) {
         // Draw board with soldermask fill when pads or holes have soldermask
         this.drawBoardWithSoldermask(element as PcbBoard)

package/lib/drawer/elements/pcb-plated-hole.ts

@@ -6,6 +6,12 @@ import { drawRect } from "../shapes/rect"
 import { drawOval } from "../shapes/oval"
 import { drawPill } from "../shapes/pill"
 import { drawPolygon } from "../shapes/polygon"
+import {
+  drawSoldermaskRingForCircle,
+  drawSoldermaskRingForOval,
+  drawSoldermaskRingForPill,
+  drawSoldermaskRingForRect,
+} from "./soldermask-margin"
 
 export interface DrawPcbPlatedHoleParams {
   ctx: CanvasContext
@@ -14,19 +20,64 @@ export interface DrawPcbPlatedHoleParams {
   colorMap: PcbColorMap
 }
 
+function getSoldermaskColor(
+  layers: string[] | undefined,
+  colorMap: PcbColorMap,
+): string {
+  const layer = layers?.includes("top") ? "top" : "bottom"
+  return (
+    colorMap.soldermaskOverCopper[
+      layer as keyof typeof colorMap.soldermaskOverCopper
+    ] ?? colorMap.soldermaskOverCopper.top
+  )
+}
+
 export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   const { ctx, hole, realToCanvasMat, colorMap } = params
 
+  const hasSoldermask =
+    hole.is_covered_with_solder_mask === true &&
+    hole.soldermask_margin !== undefined &&
+    hole.soldermask_margin !== 0
+  const margin = hasSoldermask ? hole.soldermask_margin! : 0
+  const soldermaskRingColor = getSoldermaskColor(hole.layers, colorMap)
+  const positiveMarginColor = colorMap.substrate
+  const copperColor = colorMap.copper.top
+
   if (hole.shape === "circle") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawCircle({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        radius: hole.outer_diameter / 2 + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+      })
+    }
+
     // Draw outer copper ring
     drawCircle({
       ctx,
       center: { x: hole.x, y: hole.y },
       radius: hole.outer_diameter / 2,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
     })
 
+    // For negative margins, draw soldermask ring on top of the copper ring
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForCircle(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.outer_diameter / 2,
+        margin,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor,
+      )
+    }
+
     // Draw inner drill hole
     drawCircle({
       ctx,
@@ -39,17 +90,45 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   }
 
   if (hole.shape === "oval") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawOval({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        radius_x: hole.outer_width / 2 + margin,
+        radius_y: hole.outer_height / 2 + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        rotation: hole.ccw_rotation,
+      })
+    }
+
     // Draw outer copper oval
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
       radius_x: hole.outer_width / 2,
       radius_y: hole.outer_height / 2,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       rotation: hole.ccw_rotation,
     })
 
+    // For negative margins, draw soldermask ring on top of the copper oval
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForOval(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.outer_width / 2,
+        hole.outer_height / 2,
+        margin,
+        hole.ccw_rotation ?? 0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor,
+      )
+    }
+
     // Draw inner drill hole
     drawOval({
       ctx,
@@ -64,17 +143,45 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   }
 
   if (hole.shape === "pill") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawPill({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.outer_width + margin * 2,
+        height: hole.outer_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        rotation: hole.ccw_rotation,
+      })
+    }
+
     // Draw outer copper pill
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
       width: hole.outer_width,
       height: hole.outer_height,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       rotation: hole.ccw_rotation,
     })
 
+    // For negative margins, draw soldermask ring on top of the copper pill
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForPill(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.outer_width,
+        hole.outer_height,
+        margin,
+        hole.ccw_rotation ?? 0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor,
+      )
+    }
+
     // Draw inner drill hole
     drawPill({
       ctx,
@@ -89,17 +196,46 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   }
 
   if (hole.shape === "circular_hole_with_rect_pad") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawRect({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.rect_pad_width + margin * 2,
+        height: hole.rect_pad_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        borderRadius: (hole.rect_border_radius ?? 0) + margin,
+      })
+    }
+
     // Draw rectangular pad
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       borderRadius: hole.rect_border_radius ?? 0,
     })
 
+    // For negative margins, draw soldermask ring on top of the pad
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForRect(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.rect_pad_width,
+        hole.rect_pad_height,
+        margin,
+        hole.rect_border_radius ?? 0,
+        0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor,
+      )
+    }
+
     // Draw circular drill hole (with offset)
     const holeX = hole.x + (hole.hole_offset_x ?? 0)
     const holeY = hole.y + (hole.hole_offset_y ?? 0)
@@ -114,17 +250,46 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   }
 
   if (hole.shape === "pill_hole_with_rect_pad") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawRect({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.rect_pad_width + margin * 2,
+        height: hole.rect_pad_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        borderRadius: (hole.rect_border_radius ?? 0) + margin,
+      })
+    }
+
     // Draw rectangular pad
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       borderRadius: hole.rect_border_radius ?? 0,
     })
 
+    // For negative margins, draw soldermask ring on top of the pad
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForRect(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.rect_pad_width,
+        hole.rect_pad_height,
+        margin,
+        hole.rect_border_radius ?? 0,
+        0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor,
+      )
+    }
+
     // Draw pill drill hole (with offset)
     const holeX = hole.x + (hole.hole_offset_x ?? 0)
     const holeY = hole.y + (hole.hole_offset_y ?? 0)
@@ -140,18 +305,48 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   }
 
   if (hole.shape === "rotated_pill_hole_with_rect_pad") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawRect({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.rect_pad_width + margin * 2,
+        height: hole.rect_pad_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        borderRadius: (hole.rect_border_radius ?? 0) + margin,
+        rotation: hole.rect_ccw_rotation,
+      })
+    }
+
     // Draw rotated rectangular pad
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       borderRadius: hole.rect_border_radius ?? 0,
       rotation: hole.rect_ccw_rotation,
     })
 
+    // For negative margins, draw soldermask ring on top of the pad
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForRect(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.rect_pad_width,
+        hole.rect_pad_height,
+        margin,
+        hole.rect_border_radius ?? 0,
+        hole.rect_ccw_rotation ?? 0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor,
+      )
+    }
+
     // Draw rotated pill drill hole (with offset)
     const holeX = hole.x + (hole.hole_offset_x ?? 0)
     const holeY = hole.y + (hole.hole_offset_y ?? 0)
@@ -168,6 +363,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   }
 
   if (hole.shape === "hole_with_polygon_pad") {
+    // Note: Polygon pads don't support soldermask margins (similar to SMT polygon pads)
     // Draw polygon pad
     const padOutline = hole.pad_outline
     if (padOutline && padOutline.length >= 3) {
@@ -179,7 +375,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       drawPolygon({
         ctx,
         points: padPoints,
-        fill: colorMap.copper.top,
+        fill: copperColor,
         realToCanvasMat,
       })
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.37",
+  "version": "0.0.38",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",

package/tests/elements/pcb-plated-hole-soldermask-margin.test.ts

@@ -0,0 +1,225 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbPlatedHole } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw plated holes with positive and negative soldermask margins", async () => {
+  const canvas = createCanvas(800, 600)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 800, 600)
+
+  const circuit: any = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "board0",
+      center: { x: 0, y: 0 },
+      width: 16,
+      height: 14,
+    },
+    // Circle with positive margin (mask extends beyond pad)
+    {
+      type: "pcb_plated_hole",
+      pcb_plated_hole_id: "hole_circle_positive",
+      shape: "circle",
+      x: -5,
+      y: 3.5,
+      outer_diameter: 2,
+      hole_diameter: 1,
+      layers: ["top", "bottom"],
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.2,
+    },
+    // Circle with negative margin (spacing around copper, copper visible)
+    {
+      type: "pcb_plated_hole",
+      pcb_plated_hole_id: "hole_circle_negative",
+      shape: "circle",
+      x: -5,
+      y: -3.5,
+      outer_diameter: 2,
+      hole_diameter: 1,
+      layers: ["top", "bottom"],
+      is_covered_with_solder_mask: true,
+      soldermask_margin: -0.15,
+    },
+    // Oval with positive margin
+    {
+      type: "pcb_plated_hole",
+      pcb_plated_hole_id: "hole_oval_positive",
+      shape: "oval",
+      x: 0,
+      y: 3.5,
+      outer_width: 2.4,
+      outer_height: 1.6,
+      hole_width: 1.6,
+      hole_height: 0.8,
+      layers: ["top", "bottom"],
+      ccw_rotation: 0,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.15,
+    },
+    // Oval with negative margin
+    {
+      type: "pcb_plated_hole",
+      pcb_plated_hole_id: "hole_oval_negative",
+      shape: "oval",
+      x: 0,
+      y: -3.5,
+      outer_width: 2.4,
+      outer_height: 1.6,
+      hole_width: 1.6,
+      hole_height: 0.8,
+      layers: ["top", "bottom"],
+      ccw_rotation: 0,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: -0.2,
+    },
+    // Pill with positive margin
+    {
+      type: "pcb_plated_hole",
+      pcb_plated_hole_id: "hole_pill_positive",
+      shape: "pill",
+      x: 5,
+      y: 3.5,
+      outer_width: 3,
+      outer_height: 1.5,
+      hole_width: 2,
+      hole_height: 1,
+      layers: ["top", "bottom"],
+      ccw_rotation: 0,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.1,
+    },
+    // Pill with negative margin
+    {
+      type: "pcb_plated_hole",
+      pcb_plated_hole_id: "hole_pill_negative",
+      shape: "pill",
+      x: 5,
+      y: -3.5,
+      outer_width: 3,
+      outer_height: 1.5,
+      hole_width: 2,
+      hole_height: 1,
+      layers: ["top", "bottom"],
+      ccw_rotation: 0,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: -0.12,
+    },
+    // Rectangular pad with circular hole - positive margin
+    {
+      type: "pcb_plated_hole",
+      pcb_plated_hole_id: "hole_rect_circle_positive",
+      shape: "circular_hole_with_rect_pad",
+      x: -2.5,
+      y: 0,
+      rect_pad_width: 2.4,
+      rect_pad_height: 1.6,
+      rect_border_radius: 0.2,
+      hole_diameter: 1,
+      layers: ["top", "bottom"],
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.15,
+    },
+    // Rectangular pad with circular hole - negative margin
+    {
+      type: "pcb_plated_hole",
+      pcb_plated_hole_id: "hole_rect_circle_negative",
+      shape: "circular_hole_with_rect_pad",
+      x: 2.5,
+      y: 0,
+      rect_pad_width: 2.4,
+      rect_pad_height: 1.6,
+      rect_border_radius: 0.2,
+      hole_diameter: 1,
+      layers: ["top", "bottom"],
+      is_covered_with_solder_mask: true,
+      soldermask_margin: -0.1,
+    },
+    // Silkscreen labels for positive margin holes (top row)
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_circle_pos",
+      layer: "top",
+      anchor_position: { x: -5, y: 5.2 },
+      anchor_alignment: "center",
+      text: "+0.2mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_oval_pos",
+      layer: "top",
+      anchor_position: { x: 0, y: 5.2 },
+      anchor_alignment: "center",
+      text: "+0.15mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_pill_pos",
+      layer: "top",
+      anchor_position: { x: 5, y: 5.2 },
+      anchor_alignment: "center",
+      text: "+0.1mm",
+      font_size: 0.4,
+    },
+    // Silkscreen labels for middle row (rectangular pads)
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_rect_pos",
+      layer: "top",
+      anchor_position: { x: -2.5, y: 1.8 },
+      anchor_alignment: "center",
+      text: "+0.15mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_rect_neg",
+      layer: "top",
+      anchor_position: { x: 2.5, y: -1.8 },
+      anchor_alignment: "center",
+      text: "-0.1mm",
+      font_size: 0.4,
+    },
+    // Silkscreen labels for negative margin holes (bottom row)
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_circle_neg",
+      layer: "top",
+      anchor_position: { x: -5, y: -5.2 },
+      anchor_alignment: "center",
+      text: "-0.15mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_oval_neg",
+      layer: "top",
+      anchor_position: { x: 0, y: -5.2 },
+      anchor_alignment: "center",
+      text: "-0.2mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_pill_neg",
+      layer: "top",
+      anchor_position: { x: 5, y: -5.2 },
+      anchor_alignment: "center",
+      text: "-0.12mm",
+      font_size: 0.4,
+    },
+  ]
+
+  drawer.setCameraBounds({ minX: -8, maxX: 8, minY: -6.5, maxY: 6.5 })
+  drawer.drawElements(circuit)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})