circuit-to-canvas 0.0.34 → 0.0.36

package/dist/index.d.ts

@@ -341,6 +341,14 @@ declare function drawSoldermaskRingForPill(ctx: CanvasContext, center: {
     x: number;
     y: number;
 }, width: number, height: number, margin: number, rotation: number, realToCanvasMat: Matrix, soldermaskColor: string, padColor: string): void;
+/**
+ * Draws a soldermask ring for oval shapes with negative margin
+ * (soldermask appears inside the hole boundary)
+ */
+declare function drawSoldermaskRingForOval(ctx: CanvasContext, center: {
+    x: number;
+    y: number;
+}, radius_x: number, radius_y: number, margin: number, rotation: number, realToCanvasMat: Matrix, soldermaskColor: string, holeColor: string): void;
 
 interface DrawPcbTraceParams {
     ctx: CanvasContext;
@@ -502,4 +510,4 @@ interface DrawPcbFabricationNoteDimensionParams {
 }
 declare function drawPcbFabricationNoteDimension(params: DrawPcbFabricationNoteDimensionParams): void;
 
-export { type AlphabetLayout, type AnchorAlignment, type CameraBounds, type CanvasContext, CircuitToCanvasDrawer, type CopperColorMap, type CopperLayerName, DEFAULT_PCB_COLOR_MAP, type DrawArrowParams, type DrawCircleParams, type DrawContext, type DrawDimensionLineParams, type DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCopperTextParams, type DrawPcbCutoutParams, type DrawPcbFabricationNoteDimensionParams, type DrawPcbFabricationNotePathParams, type DrawPcbFabricationNoteRectParams, type DrawPcbFabricationNoteTextParams, type DrawPcbHoleParams, type DrawPcbNoteDimensionParams, type DrawPcbNotePathParams, type DrawPcbNoteRectParams, type DrawPcbNoteTextParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, type DrawPcbSilkscreenOvalParams, type DrawPcbSilkscreenPathParams, type DrawPcbSilkscreenPillParams, type DrawPcbSilkscreenRectParams, type DrawPcbSilkscreenTextParams, type DrawPcbSmtPadParams, type DrawPcbTraceParams, type DrawPcbViaParams, type DrawPillParams, type DrawPolygonParams, type DrawRectParams, type DrawTextParams, type DrawerConfig, type PcbColorMap, drawArrow, drawCircle, drawDimensionLine, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNoteDimension, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbNoteDimension, drawPcbNotePath, drawPcbNoteRect, drawPcbNoteText, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenOval, drawPcbSilkscreenPath, drawPcbSilkscreenPill, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawSoldermaskRingForCircle, drawSoldermaskRingForPill, drawSoldermaskRingForRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };
+export { type AlphabetLayout, type AnchorAlignment, type CameraBounds, type CanvasContext, CircuitToCanvasDrawer, type CopperColorMap, type CopperLayerName, DEFAULT_PCB_COLOR_MAP, type DrawArrowParams, type DrawCircleParams, type DrawContext, type DrawDimensionLineParams, type DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCopperTextParams, type DrawPcbCutoutParams, type DrawPcbFabricationNoteDimensionParams, type DrawPcbFabricationNotePathParams, type DrawPcbFabricationNoteRectParams, type DrawPcbFabricationNoteTextParams, type DrawPcbHoleParams, type DrawPcbNoteDimensionParams, type DrawPcbNotePathParams, type DrawPcbNoteRectParams, type DrawPcbNoteTextParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, type DrawPcbSilkscreenOvalParams, type DrawPcbSilkscreenPathParams, type DrawPcbSilkscreenPillParams, type DrawPcbSilkscreenRectParams, type DrawPcbSilkscreenTextParams, type DrawPcbSmtPadParams, type DrawPcbTraceParams, type DrawPcbViaParams, type DrawPillParams, type DrawPolygonParams, type DrawRectParams, type DrawTextParams, type DrawerConfig, type PcbColorMap, drawArrow, drawCircle, drawDimensionLine, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNoteDimension, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbNoteDimension, drawPcbNotePath, drawPcbNoteRect, drawPcbNoteText, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenOval, drawPcbSilkscreenPath, drawPcbSilkscreenPill, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawSoldermaskRingForCircle, drawSoldermaskRingForOval, drawSoldermaskRingForPill, drawSoldermaskRingForRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };

package/dist/index.js

@@ -457,7 +457,19 @@ function drawPcbVia(params) {
 // lib/drawer/elements/pcb-hole.ts
 function drawPcbHole(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 positiveMarginColor = colorMap.substrate;
   if (hole.hole_shape === "circle") {
+    if (hasSoldermask && margin > 0) {
+      drawCircle({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        radius: hole.hole_diameter / 2 + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat
+      });
+    }
     drawCircle({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -468,6 +480,16 @@ function drawPcbHole(params) {
     return;
   }
   if (hole.hole_shape === "square") {
+    if (hasSoldermask && margin > 0) {
+      drawRect({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.hole_diameter + margin * 2,
+        height: hole.hole_diameter + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat
+      });
+    }
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -479,6 +501,16 @@ function drawPcbHole(params) {
     return;
   }
   if (hole.hole_shape === "oval") {
+    if (hasSoldermask && margin > 0) {
+      drawOval({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        radius_x: hole.hole_width / 2 + margin,
+        radius_y: hole.hole_height / 2 + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat
+      });
+    }
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -490,6 +522,16 @@ function drawPcbHole(params) {
     return;
   }
   if (hole.hole_shape === "rect") {
+    if (hasSoldermask && margin > 0) {
+      drawRect({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.hole_width + margin * 2,
+        height: hole.hole_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat
+      });
+    }
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -501,6 +543,16 @@ function drawPcbHole(params) {
     return;
   }
   if (hole.hole_shape === "pill") {
+    if (hasSoldermask && margin > 0) {
+      drawPill({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.hole_width + margin * 2,
+        height: hole.hole_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat
+      });
+    }
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -512,6 +564,18 @@ function drawPcbHole(params) {
     return;
   }
   if (hole.hole_shape === "rotated_pill") {
+    const rotation = hole.ccw_rotation ?? 0;
+    if (hasSoldermask && margin > 0) {
+      drawPill({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.hole_width + margin * 2,
+        height: hole.hole_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        rotation
+      });
+    }
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -519,7 +583,7 @@ function drawPcbHole(params) {
       height: hole.hole_height,
       fill: colorMap.drill,
       realToCanvasMat,
-      rotation: hole.ccw_rotation ?? 0
+      rotation
     });
     return;
   }
@@ -699,6 +763,37 @@ function drawSoldermaskRingForPill(ctx, center, width, height, margin, rotation,
   }
   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) {
@@ -1620,27 +1715,6 @@ function drawPcbNoteText(params) {
 
 // lib/drawer/shapes/dimension-line.ts
 import { applyToPoint as applyToPoint13 } from "transformation-matrix";
-
-// lib/drawer/shapes/arrow.ts
-function drawArrow(params) {
-  const { ctx, x, y, angle, arrowSize, color, strokeWidth } = params;
-  ctx.save();
-  ctx.translate(x, y);
-  ctx.rotate(angle);
-  ctx.beginPath();
-  ctx.moveTo(0, 0);
-  ctx.lineTo(-arrowSize, -arrowSize / 2);
-  ctx.moveTo(0, 0);
-  ctx.lineTo(-arrowSize, arrowSize / 2);
-  ctx.lineWidth = strokeWidth;
-  ctx.strokeStyle = color;
-  ctx.lineCap = "round";
-  ctx.lineJoin = "round";
-  ctx.stroke();
-  ctx.restore();
-}
-
-// lib/drawer/shapes/dimension-line.ts
 var TEXT_OFFSET_MULTIPLIER = 1.5;
 var CHARACTER_WIDTH_MULTIPLIER = 0.6;
 var TEXT_INTERSECTION_PADDING_MULTIPLIER = 0.3;
@@ -1673,71 +1747,103 @@ function drawDimensionLine(params) {
   };
   const fromOffset = { x: from.x + offsetVector.x, y: from.y + offsetVector.y };
   const toOffset = { x: to.x + offsetVector.x, y: to.y + offsetVector.y };
-  const fromBase = fromOffset;
-  const toBase = toOffset;
+  const fromBase = {
+    x: fromOffset.x + direction.x * arrowSize,
+    y: fromOffset.y + direction.y * arrowSize
+  };
+  const toBase = {
+    x: toOffset.x - direction.x * arrowSize,
+    y: toOffset.y - direction.y * arrowSize
+  };
   const scaleValue = Math.abs(realToCanvasMat.a);
   const strokeWidth = manualStrokeWidth ?? arrowSize / 5;
   const lineColor = color || "rgba(255,255,255,0.5)";
   const extensionDirection = hasOffsetDirection && (Math.abs(normalizedOffsetDirection.x) > Number.EPSILON || Math.abs(normalizedOffsetDirection.y) > Number.EPSILON) ? normalizedOffsetDirection : perpendicular;
   const extensionLength = offsetMagnitude + 0.5;
-  const drawExtension = (anchor) => {
+  const allPoints = [];
+  const getExtensionPoints = (anchor) => {
     const endPoint = {
       x: anchor.x + extensionDirection.x * extensionLength,
       y: anchor.y + extensionDirection.y * extensionLength
     };
-    drawLine({
-      ctx,
-      start: anchor,
-      end: endPoint,
-      strokeWidth,
-      stroke: lineColor,
-      realToCanvasMat
-    });
+    const halfWidth2 = strokeWidth / 2;
+    const extPerpendicular = {
+      x: -extensionDirection.y,
+      y: extensionDirection.x
+    };
+    return [
+      {
+        x: anchor.x + extPerpendicular.x * halfWidth2,
+        y: anchor.y + extPerpendicular.y * halfWidth2
+      },
+      {
+        x: anchor.x - extPerpendicular.x * halfWidth2,
+        y: anchor.y - extPerpendicular.y * halfWidth2
+      },
+      {
+        x: endPoint.x - extPerpendicular.x * halfWidth2,
+        y: endPoint.y - extPerpendicular.y * halfWidth2
+      },
+      {
+        x: endPoint.x + extPerpendicular.x * halfWidth2,
+        y: endPoint.y + extPerpendicular.y * halfWidth2
+      }
+    ];
   };
-  drawExtension(from);
-  drawExtension(to);
-  drawLine({
+  const ext1 = getExtensionPoints(from);
+  allPoints.push(...ext1, ext1[0]);
+  const ext2 = getExtensionPoints(to);
+  allPoints.push(...ext2, ext2[0]);
+  const halfWidth = strokeWidth / 2;
+  const mainLine = [
+    {
+      x: fromBase.x + perpendicular.x * halfWidth,
+      y: fromBase.y + perpendicular.y * halfWidth
+    },
+    {
+      x: fromBase.x - perpendicular.x * halfWidth,
+      y: fromBase.y - perpendicular.y * halfWidth
+    },
+    {
+      x: toBase.x - perpendicular.x * halfWidth,
+      y: toBase.y - perpendicular.y * halfWidth
+    },
+    {
+      x: toBase.x + perpendicular.x * halfWidth,
+      y: toBase.y + perpendicular.y * halfWidth
+    }
+  ];
+  allPoints.push(...mainLine, mainLine[0]);
+  const arrow1 = [
+    fromOffset,
+    {
+      x: fromOffset.x + direction.x * arrowSize + perpendicular.x * (arrowSize / 2),
+      y: fromOffset.y + direction.y * arrowSize + perpendicular.y * (arrowSize / 2)
+    },
+    {
+      x: fromOffset.x + direction.x * arrowSize - perpendicular.x * (arrowSize / 2),
+      y: fromOffset.y + direction.y * arrowSize - perpendicular.y * (arrowSize / 2)
+    }
+  ];
+  allPoints.push(...arrow1, arrow1[0]);
+  const arrow2 = [
+    toOffset,
+    {
+      x: toOffset.x - direction.x * arrowSize + perpendicular.x * (arrowSize / 2),
+      y: toOffset.y - direction.y * arrowSize + perpendicular.y * (arrowSize / 2)
+    },
+    {
+      x: toOffset.x - direction.x * arrowSize - perpendicular.x * (arrowSize / 2),
+      y: toOffset.y - direction.y * arrowSize - perpendicular.y * (arrowSize / 2)
+    }
+  ];
+  allPoints.push(...arrow2, arrow2[0]);
+  drawPolygon({
     ctx,
-    start: fromBase,
-    end: toBase,
-    strokeWidth,
-    stroke: lineColor,
+    points: allPoints,
+    fill: lineColor,
     realToCanvasMat
   });
-  const [canvasFromX, canvasFromY] = applyToPoint13(realToCanvasMat, [
-    fromOffset.x,
-    fromOffset.y
-  ]);
-  const [canvasToX, canvasToY] = applyToPoint13(realToCanvasMat, [
-    toOffset.x,
-    toOffset.y
-  ]);
-  const [canvasToDirX, canvasToDirY] = applyToPoint13(realToCanvasMat, [
-    toOffset.x + direction.x,
-    toOffset.y + direction.y
-  ]);
-  const canvasLineAngle = Math.atan2(
-    canvasToDirY - canvasToY,
-    canvasToDirX - canvasToX
-  );
-  drawArrow({
-    ctx,
-    x: canvasFromX,
-    y: canvasFromY,
-    angle: canvasLineAngle + Math.PI,
-    arrowSize: arrowSize * scaleValue,
-    color: lineColor,
-    strokeWidth: strokeWidth * scaleValue
-  });
-  drawArrow({
-    ctx,
-    x: canvasToX,
-    y: canvasToY,
-    angle: canvasLineAngle,
-    arrowSize: arrowSize * scaleValue,
-    color: lineColor,
-    strokeWidth: strokeWidth * scaleValue
-  });
   if (text) {
     const midPoint = {
       x: (from.x + to.x) / 2 + offsetVector.x,
@@ -1767,9 +1873,9 @@ function drawDimensionLine(params) {
       const rotationRad = textRotation * Math.PI / 180;
       const sinRot = Math.abs(Math.sin(rotationRad));
       const cosRot = Math.abs(Math.cos(rotationRad));
-      const halfWidth = textWidth / 2;
+      const halfWidth2 = textWidth / 2;
       const halfHeight = textHeight / 2;
-      const maxExtension = halfWidth * sinRot + halfHeight * cosRot;
+      const maxExtension = halfWidth2 * sinRot + halfHeight * cosRot;
       additionalOffset = maxExtension + fontSize * TEXT_INTERSECTION_PADDING_MULTIPLIER;
     }
     const textOffset = arrowSize * TEXT_OFFSET_MULTIPLIER + additionalOffset;
@@ -1930,8 +2036,11 @@ var CircuitToCanvasDrawer = class {
     const hasSoldermaskPads = elements.some(
       (el) => el.type === "pcb_smtpad" && el.is_covered_with_solder_mask === true
     );
+    const hasSoldermaskHoles = elements.some(
+      (el) => el.type === "pcb_hole" && el.is_covered_with_solder_mask === true
+    );
     for (const element of elements) {
-      if (element.type === "pcb_board" && hasSoldermaskPads) {
+      if (element.type === "pcb_board" && (hasSoldermaskPads || hasSoldermaskHoles)) {
         this.drawBoardWithSoldermask(element);
       } else {
         this.drawElement(element, options);
@@ -2205,6 +2314,22 @@ var CircuitToCanvasDrawer = class {
     }
   }
 };
+
+// lib/drawer/shapes/arrow.ts
+function drawArrow(params) {
+  const { ctx, x, y, angle, arrowSize, color, strokeWidth } = params;
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(angle);
+  ctx.beginPath();
+  ctx.moveTo(0, 0);
+  ctx.lineTo(-arrowSize, -arrowSize / 2);
+  ctx.lineTo(-arrowSize, arrowSize / 2);
+  ctx.closePath();
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.restore();
+}
 export {
   CircuitToCanvasDrawer,
   DEFAULT_PCB_COLOR_MAP,
@@ -2242,6 +2367,7 @@ export {
   drawPolygon,
   drawRect,
   drawSoldermaskRingForCircle,
+  drawSoldermaskRingForOval,
   drawSoldermaskRingForPill,
   drawSoldermaskRingForRect,
   drawText,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -160,16 +160,25 @@ export class CircuitToCanvasDrawer {
     elements: AnyCircuitElement[],
     options: DrawElementsOptions = {},
   ): void {
-    // Check if any pad has is_covered_with_solder_mask: true
+    // Check if any pad or hole has is_covered_with_solder_mask: true
     const hasSoldermaskPads = elements.some(
       (el) =>
         el.type === "pcb_smtpad" &&
         (el as PcbSmtPad).is_covered_with_solder_mask === true,
     )
+    const hasSoldermaskHoles = elements.some(
+      (el) =>
+        el.type === "pcb_hole" &&
+        (el as PcbHole & { is_covered_with_solder_mask?: boolean })
+          .is_covered_with_solder_mask === true,
+    )
 
     for (const element of elements) {
-      if (element.type === "pcb_board" && hasSoldermaskPads) {
-        // Draw board with soldermask fill when pads have soldermask
+      if (
+        element.type === "pcb_board" &&
+        (hasSoldermaskPads || hasSoldermaskHoles)
+      ) {
+        // Draw board with soldermask fill when pads or holes have soldermask
         this.drawBoardWithSoldermask(element as PcbBoard)
       } else {
         this.drawElement(element, options)

package/lib/drawer/elements/index.ts

@@ -12,6 +12,7 @@ export {
   drawSoldermaskRingForRect,
   drawSoldermaskRingForCircle,
   drawSoldermaskRingForPill,
+  drawSoldermaskRingForOval,
 } from "./soldermask-margin"
 
 export { drawPcbTrace, type DrawPcbTraceParams } from "./pcb-trace"

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

@@ -16,7 +16,26 @@ export interface DrawPcbHoleParams {
 export function drawPcbHole(params: DrawPcbHoleParams): 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 positiveMarginColor = colorMap.substrate
+
   if (hole.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.hole_diameter / 2 + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+      })
+    }
+
+    // Draw the hole
     drawCircle({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -28,6 +47,19 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
   }
 
   if (hole.hole_shape === "square") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawRect({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.hole_diameter + margin * 2,
+        height: hole.hole_diameter + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+      })
+    }
+
+    // Draw the hole
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -40,6 +72,19 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
   }
 
   if (hole.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.hole_width / 2 + margin,
+        radius_y: hole.hole_height / 2 + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+      })
+    }
+
+    // Draw the hole
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -52,6 +97,19 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
   }
 
   if (hole.hole_shape === "rect") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawRect({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.hole_width + margin * 2,
+        height: hole.hole_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+      })
+    }
+
+    // Draw the hole
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -64,6 +122,19 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
   }
 
   if (hole.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.hole_width + margin * 2,
+        height: hole.hole_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+      })
+    }
+
+    // Draw the hole
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -76,6 +147,22 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
   }
 
   if (hole.hole_shape === "rotated_pill") {
+    const rotation = (hole as any).ccw_rotation ?? 0
+
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawPill({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        width: hole.hole_width + margin * 2,
+        height: hole.hole_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        rotation,
+      })
+    }
+
+    // Draw the hole
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -83,7 +170,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
       height: hole.hole_height,
       fill: colorMap.drill,
       realToCanvasMat,
-      rotation: (hole as any).ccw_rotation ?? 0,
+      rotation,
     })
     return
   }

package/lib/drawer/elements/soldermask-margin.ts

@@ -264,3 +264,63 @@ export function drawSoldermaskRingForPill(
 
   ctx.restore()
 }
+
+/**
+ * Draws a soldermask ring for oval shapes with negative margin
+ * (soldermask appears inside the hole boundary)
+ */
+export function drawSoldermaskRingForOval(
+  ctx: CanvasContext,
+  center: { x: number; y: number },
+  radius_x: number,
+  radius_y: number,
+  margin: number,
+  rotation: number,
+  realToCanvasMat: Matrix,
+  soldermaskColor: string,
+  holeColor: string,
+): void {
+  const [cx, cy] = applyToPoint(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))
+  }
+
+  // For negative margins, outer is hole boundary, inner is reduced by margin
+  // Use source-atop so the ring only appears on the hole
+  const prevCompositeOp = ctx.globalCompositeOperation
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = "source-atop"
+  }
+
+  // Draw outer oval filled (at hole boundary)
+  ctx.beginPath()
+  ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2)
+  ctx.fillStyle = soldermaskColor
+  ctx.fill()
+
+  // Reset composite operation and restore hole color in inner area
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over"
+  }
+
+  // Restore hole color in inner oval (reduced by margin)
+  // For ovals, we reduce both radii by the margin
+  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()
+}

package/lib/drawer/shapes/arrow.ts

@@ -23,14 +23,11 @@ export function drawArrow(params: DrawArrowParams): void {
   ctx.beginPath()
   ctx.moveTo(0, 0)
   ctx.lineTo(-arrowSize, -arrowSize / 2)
-  ctx.moveTo(0, 0)
   ctx.lineTo(-arrowSize, arrowSize / 2)
+  ctx.closePath()
 
-  ctx.lineWidth = strokeWidth
-  ctx.strokeStyle = color
-  ctx.lineCap = "round"
-  ctx.lineJoin = "round"
-  ctx.stroke()
+  ctx.fillStyle = color
+  ctx.fill()
 
   ctx.restore()
 }

package/lib/drawer/shapes/dimension-line.ts

@@ -1,9 +1,8 @@
 import type { Matrix } from "transformation-matrix"
 import { applyToPoint } from "transformation-matrix"
 import type { CanvasContext } from "../types"
-import { drawLine } from "./line"
+import { drawPolygon } from "./polygon"
 import { drawText } from "./text"
-import { drawArrow } from "./arrow"
 
 export interface DrawDimensionLineParams {
   ctx: CanvasContext
@@ -67,8 +66,14 @@ export function drawDimensionLine(params: DrawDimensionLineParams): void {
   const fromOffset = { x: from.x + offsetVector.x, y: from.y + offsetVector.y }
   const toOffset = { x: to.x + offsetVector.x, y: to.y + offsetVector.y }
 
-  const fromBase = fromOffset
-  const toBase = toOffset
+  const fromBase = {
+    x: fromOffset.x + direction.x * arrowSize,
+    y: fromOffset.y + direction.y * arrowSize,
+  }
+  const toBase = {
+    x: toOffset.x - direction.x * arrowSize,
+    y: toOffset.y - direction.y * arrowSize,
+  }
 
   const scaleValue = Math.abs(realToCanvasMat.a)
   const strokeWidth = manualStrokeWidth ?? arrowSize / 5
@@ -84,71 +89,123 @@ export function drawDimensionLine(params: DrawDimensionLineParams): void {
 
   const extensionLength = offsetMagnitude + 0.5
 
-  const drawExtension = (anchor: { x: number; y: number }) => {
+  const allPoints: Array<{ x: number; y: number }> = []
+
+  const getExtensionPoints = (anchor: { x: number; y: number }) => {
     const endPoint = {
       x: anchor.x + extensionDirection.x * extensionLength,
       y: anchor.y + extensionDirection.y * extensionLength,
     }
-    drawLine({
-      ctx,
-      start: anchor,
-      end: endPoint,
-      strokeWidth,
-      stroke: lineColor,
-      realToCanvasMat,
-    })
+    const halfWidth = strokeWidth / 2
+    const extPerpendicular = {
+      x: -extensionDirection.y,
+      y: extensionDirection.x,
+    }
+    return [
+      {
+        x: anchor.x + extPerpendicular.x * halfWidth,
+        y: anchor.y + extPerpendicular.y * halfWidth,
+      },
+      {
+        x: anchor.x - extPerpendicular.x * halfWidth,
+        y: anchor.y - extPerpendicular.y * halfWidth,
+      },
+      {
+        x: endPoint.x - extPerpendicular.x * halfWidth,
+        y: endPoint.y - extPerpendicular.y * halfWidth,
+      },
+      {
+        x: endPoint.x + extPerpendicular.x * halfWidth,
+        y: endPoint.y + extPerpendicular.y * halfWidth,
+      },
+    ]
   }
 
-  drawExtension(from)
-  drawExtension(to)
+  // Extension lines (ticks)
+  const ext1 = getExtensionPoints(from)
+  allPoints.push(...ext1, ext1[0]!)
+
+  const ext2 = getExtensionPoints(to)
+  allPoints.push(...ext2, ext2[0]!)
 
   // Main dimension line
-  drawLine({
-    ctx,
-    start: fromBase,
-    end: toBase,
-    strokeWidth,
-    stroke: lineColor,
-    realToCanvasMat,
-  })
+  const halfWidth = strokeWidth / 2
+  const mainLine = [
+    {
+      x: fromBase.x + perpendicular.x * halfWidth,
+      y: fromBase.y + perpendicular.y * halfWidth,
+    },
+    {
+      x: fromBase.x - perpendicular.x * halfWidth,
+      y: fromBase.y - perpendicular.y * halfWidth,
+    },
+    {
+      x: toBase.x - perpendicular.x * halfWidth,
+      y: toBase.y - perpendicular.y * halfWidth,
+    },
+    {
+      x: toBase.x + perpendicular.x * halfWidth,
+      y: toBase.y + perpendicular.y * halfWidth,
+    },
+  ]
+  allPoints.push(...mainLine, mainLine[0]!)
 
-  // Arrows (Keep V-shaped but matching size)
-  const [canvasFromX, canvasFromY] = applyToPoint(realToCanvasMat, [
-    fromOffset.x,
-    fromOffset.y,
-  ])
-  const [canvasToX, canvasToY] = applyToPoint(realToCanvasMat, [
-    toOffset.x,
-    toOffset.y,
-  ])
-  const [canvasToDirX, canvasToDirY] = applyToPoint(realToCanvasMat, [
-    toOffset.x + direction.x,
-    toOffset.y + direction.y,
-  ])
-
-  const canvasLineAngle = Math.atan2(
-    canvasToDirY - canvasToY,
-    canvasToDirX - canvasToX,
-  )
-
-  drawArrow({
-    ctx,
-    x: canvasFromX,
-    y: canvasFromY,
-    angle: canvasLineAngle + Math.PI,
-    arrowSize: arrowSize * scaleValue,
-    color: lineColor,
-    strokeWidth: strokeWidth * scaleValue,
-  })
+  // Arrows
+  const arrow1 = [
+    fromOffset,
+    {
+      x:
+        fromOffset.x +
+        direction.x * arrowSize +
+        perpendicular.x * (arrowSize / 2),
+      y:
+        fromOffset.y +
+        direction.y * arrowSize +
+        perpendicular.y * (arrowSize / 2),
+    },
+    {
+      x:
+        fromOffset.x +
+        direction.x * arrowSize -
+        perpendicular.x * (arrowSize / 2),
+      y:
+        fromOffset.y +
+        direction.y * arrowSize -
+        perpendicular.y * (arrowSize / 2),
+    },
+  ]
+  allPoints.push(...arrow1, arrow1[0]!)
 
-  drawArrow({
+  const arrow2 = [
+    toOffset,
+    {
+      x:
+        toOffset.x -
+        direction.x * arrowSize +
+        perpendicular.x * (arrowSize / 2),
+      y:
+        toOffset.y -
+        direction.y * arrowSize +
+        perpendicular.y * (arrowSize / 2),
+    },
+    {
+      x:
+        toOffset.x -
+        direction.x * arrowSize -
+        perpendicular.x * (arrowSize / 2),
+      y:
+        toOffset.y -
+        direction.y * arrowSize -
+        perpendicular.y * (arrowSize / 2),
+    },
+  ]
+  allPoints.push(...arrow2, arrow2[0]!)
+
+  drawPolygon({
     ctx,
-    x: canvasToX,
-    y: canvasToY,
-    angle: canvasLineAngle,
-    arrowSize: arrowSize * scaleValue,
-    color: lineColor,
-    strokeWidth: strokeWidth * scaleValue,
+    points: allPoints,
+    fill: lineColor,
+    realToCanvasMat,
   })
 
   // Text

package/package.json

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

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

@@ -0,0 +1,133 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw holes with positive 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: 14,
+      height: 10,
+    },
+    // Circle with positive margin (mask extends beyond hole)
+    {
+      type: "pcb_hole",
+      pcb_hole_id: "hole_circle_positive",
+      hole_shape: "circle",
+      x: -4,
+      y: 2,
+      hole_diameter: 1.0,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.2,
+    },
+    // Square with positive margin
+    {
+      type: "pcb_hole",
+      pcb_hole_id: "hole_square_positive",
+      hole_shape: "square",
+      x: -1,
+      y: 2,
+      hole_diameter: 1.0,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.15,
+    },
+    // Oval with positive margin
+    {
+      type: "pcb_hole",
+      pcb_hole_id: "hole_oval_positive",
+      hole_shape: "oval",
+      x: 2,
+      y: 2,
+      hole_width: 1.5,
+      hole_height: 0.8,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.1,
+    },
+    // Rect with positive margin
+    {
+      type: "pcb_hole",
+      pcb_hole_id: "hole_rect_positive",
+      hole_shape: "rect",
+      x: 5,
+      y: 2,
+      hole_width: 1.6,
+      hole_height: 1.1,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.15,
+    },
+    // Pill with positive margin
+    {
+      type: "pcb_hole",
+      pcb_hole_id: "hole_pill_positive",
+      hole_shape: "pill",
+      x: -2.5,
+      y: 0,
+      hole_width: 2.0,
+      hole_height: 0.8,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.1,
+    },
+    // Silkscreen labels for positive margin holes
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_circle_pos",
+      layer: "top",
+      anchor_position: { x: -4, y: 3.2 },
+      anchor_alignment: "center",
+      text: "+0.2mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_square_pos",
+      layer: "top",
+      anchor_position: { x: -1, y: 3.2 },
+      anchor_alignment: "center",
+      text: "+0.15mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_oval_pos",
+      layer: "top",
+      anchor_position: { x: 2, y: 3.2 },
+      anchor_alignment: "center",
+      text: "+0.1mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_rect_pos",
+      layer: "top",
+      anchor_position: { x: 5, y: 3.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: -2.5, y: 1 },
+      anchor_alignment: "center",
+      text: "+0.1mm",
+      font_size: 0.4,
+    },
+  ]
+
+  drawer.setCameraBounds({ minX: -7, maxX: 7, minY: -5, maxY: 5 })
+  drawer.drawElements(circuit)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})