circuit-to-canvas 0.0.41 → 0.0.42

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyCircuitElement, PcbRenderLayer, NinePointAnchor, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbSilkscreenPill, PcbSilkscreenOval, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText, PcbNoteDimension, PcbFabricationNoteDimension } from 'circuit-json';
+import { AnyCircuitElement, PcbRenderLayer, NinePointAnchor, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbSilkscreenPill, PcbSilkscreenOval, PcbCutout, PCBKeepout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText, PcbNoteDimension, PcbFabricationNoteDimension } from 'circuit-json';
 import { Matrix } from 'transformation-matrix';
 
 /**
@@ -18,6 +18,7 @@ interface CanvasContext {
     moveTo(x: number, y: number): void;
     save(): void;
     restore(): void;
+    clip(): void;
     translate(x: number, y: number): void;
     rotate(angle: number): void;
     scale(x: number, y: number): void;
@@ -68,6 +69,7 @@ interface PcbColorMap {
     };
     substrate: string;
     courtyard: string;
+    keepout: string;
 }
 declare const DEFAULT_PCB_COLOR_MAP: PcbColorMap;
 interface DrawerConfig {
@@ -430,6 +432,14 @@ interface DrawPcbCutoutParams {
 }
 declare function drawPcbCutout(params: DrawPcbCutoutParams): void;
 
+interface DrawPcbKeepoutParams {
+    ctx: CanvasContext;
+    keepout: PCBKeepout;
+    realToCanvasMat: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbKeepout(params: DrawPcbKeepoutParams): void;
+
 interface DrawPcbCopperPourParams {
     ctx: CanvasContext;
     pour: PcbCopperPour;
@@ -510,4 +520,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, drawSoldermaskRingForOval, 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 DrawPcbKeepoutParams, 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, drawPcbKeepout, 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

@@ -4,7 +4,7 @@ import {
   compose,
   translate,
   scale,
-  applyToPoint as applyToPoint15
+  applyToPoint as applyToPoint16
 } from "transformation-matrix";
 
 // lib/drawer/pcb-render-layer-filter.ts
@@ -51,7 +51,9 @@ var DEFAULT_PCB_COLOR_MAP = {
     bottom: "#5da9e9"
   },
   boardOutline: "rgba(255, 255, 255, 0.5)",
-  courtyard: "#FF00FF"
+  courtyard: "#FF00FF",
+  keepout: "#FF6B6B"
+  // Red color for keepout zones
 };
 
 // lib/drawer/shapes/circle.ts
@@ -92,11 +94,6 @@ function drawRect(params) {
   if (rotation !== 0) {
     ctx.rotate(-rotation * (Math.PI / 180));
   }
-  if (isStrokeDashed && scaledStrokeWidth) {
-    ctx.setLineDash([scaledStrokeWidth * 2, scaledStrokeWidth * 2]);
-  } else {
-    ctx.setLineDash([]);
-  }
   ctx.beginPath();
   if (scaledRadius > 0) {
     const x = -scaledWidth / 2;
@@ -125,6 +122,11 @@ function drawRect(params) {
     ctx.fill();
   }
   if (stroke && scaledStrokeWidth) {
+    if (isStrokeDashed) {
+      ctx.setLineDash([scaledStrokeWidth * 3, scaledStrokeWidth * 2]);
+    } else {
+      ctx.setLineDash([]);
+    }
     ctx.strokeStyle = stroke;
     ctx.lineWidth = scaledStrokeWidth;
     ctx.stroke();
@@ -1673,8 +1675,94 @@ function drawPcbCutout(params) {
   }
 }
 
-// lib/drawer/elements/pcb-copper-pour.ts
+// lib/drawer/elements/pcb-keepout.ts
 import { applyToPoint as applyToPoint11 } from "transformation-matrix";
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function drawPcbKeepout(params) {
+  const { ctx, keepout, realToCanvasMat, colorMap } = params;
+  const strokeColor = colorMap.keepout;
+  const fillColor = hexToRgba(colorMap.keepout, 0.2);
+  const hatchSpacing = 1;
+  if (keepout.shape === "rect") {
+    const [cx, cy] = applyToPoint11(realToCanvasMat, [
+      keepout.center.x,
+      keepout.center.y
+    ]);
+    const scaledWidth = keepout.width * Math.abs(realToCanvasMat.a);
+    const scaledHeight = keepout.height * Math.abs(realToCanvasMat.a);
+    const rotation = keepout.rotation ?? 0;
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * (Math.PI / 180));
+    }
+    ctx.beginPath();
+    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
+    ctx.fillStyle = fillColor;
+    ctx.fill();
+    ctx.beginPath();
+    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
+    ctx.clip();
+    const scaledSpacing = hatchSpacing * Math.abs(realToCanvasMat.a);
+    const diagonal = Math.sqrt(
+      scaledWidth * scaledWidth + scaledHeight * scaledHeight
+    );
+    const halfWidth = scaledWidth / 2;
+    const halfHeight = scaledHeight / 2;
+    ctx.strokeStyle = strokeColor;
+    ctx.lineWidth = 0.15 * Math.abs(realToCanvasMat.a);
+    ctx.setLineDash([]);
+    for (let offset = -diagonal; offset < diagonal * 2; offset += scaledSpacing) {
+      ctx.beginPath();
+      const startX = -halfWidth + offset;
+      const startY = -halfHeight;
+      const endX = -halfWidth + offset + diagonal;
+      const endY = -halfHeight + diagonal;
+      ctx.moveTo(startX, startY);
+      ctx.lineTo(endX, endY);
+      ctx.stroke();
+    }
+    ctx.restore();
+    return;
+  }
+  if (keepout.shape === "circle") {
+    const [cx, cy] = applyToPoint11(realToCanvasMat, [
+      keepout.center.x,
+      keepout.center.y
+    ]);
+    const scaledRadius = keepout.radius * Math.abs(realToCanvasMat.a);
+    const scaledSpacing = hatchSpacing * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    ctx.beginPath();
+    ctx.arc(0, 0, scaledRadius, 0, Math.PI * 2);
+    ctx.fillStyle = fillColor;
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(0, 0, scaledRadius, 0, Math.PI * 2);
+    ctx.clip();
+    const diagonal = scaledRadius * 2;
+    ctx.strokeStyle = strokeColor;
+    ctx.lineWidth = 0.15 * Math.abs(realToCanvasMat.a);
+    ctx.setLineDash([]);
+    for (let offset = -diagonal; offset < diagonal * 2; offset += scaledSpacing) {
+      ctx.beginPath();
+      ctx.moveTo(offset - diagonal, -diagonal);
+      ctx.lineTo(offset + diagonal, diagonal);
+      ctx.stroke();
+    }
+    ctx.restore();
+    return;
+  }
+}
+
+// lib/drawer/elements/pcb-copper-pour.ts
+import { applyToPoint as applyToPoint12 } from "transformation-matrix";
 function layerToColor3(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
@@ -1683,7 +1771,7 @@ function drawPcbCopperPour(params) {
   const color = layerToColor3(pour.layer, colorMap);
   ctx.save();
   if (pour.shape === "rect") {
-    const [cx, cy] = applyToPoint11(realToCanvasMat, [
+    const [cx, cy] = applyToPoint12(realToCanvasMat, [
       pour.center.x,
       pour.center.y
     ]);
@@ -1704,7 +1792,7 @@ function drawPcbCopperPour(params) {
   if (pour.shape === "polygon") {
     if (pour.points && pour.points.length >= 3) {
       const canvasPoints = pour.points.map(
-        (p) => applyToPoint11(realToCanvasMat, [p.x, p.y])
+        (p) => applyToPoint12(realToCanvasMat, [p.x, p.y])
       );
       const firstPoint = canvasPoints[0];
       if (!firstPoint) {
@@ -1732,7 +1820,7 @@ function drawPcbCopperPour(params) {
 }
 
 // lib/drawer/elements/pcb-copper-text.ts
-import { applyToPoint as applyToPoint12 } from "transformation-matrix";
+import { applyToPoint as applyToPoint13 } from "transformation-matrix";
 var DEFAULT_PADDING = { left: 0.2, right: 0.2, top: 0.2, bottom: 0.2 };
 function layerToCopperColor(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
@@ -1747,7 +1835,7 @@ function drawPcbCopperText(params) {
   const { ctx, text, realToCanvasMat, colorMap } = params;
   const content = text.text ?? "";
   if (!content) return;
-  const [x, y] = applyToPoint12(realToCanvasMat, [
+  const [x, y] = applyToPoint13(realToCanvasMat, [
     text.anchor_position.x,
     text.anchor_position.y
   ]);
@@ -1931,7 +2019,7 @@ function drawPcbNoteText(params) {
 }
 
 // lib/drawer/shapes/dimension-line.ts
-import { applyToPoint as applyToPoint13 } from "transformation-matrix";
+import { applyToPoint as applyToPoint14 } from "transformation-matrix";
 var TEXT_OFFSET_MULTIPLIER = 1.5;
 var CHARACTER_WIDTH_MULTIPLIER = 0.6;
 var TEXT_INTERSECTION_PADDING_MULTIPLIER = 0.3;
@@ -2064,11 +2152,11 @@ function drawDimensionLine(params) {
       x: (from.x + to.x) / 2 + offsetVector.x,
       y: (from.y + to.y) / 2 + offsetVector.y
     };
-    const [screenFromX, screenFromY] = applyToPoint13(realToCanvasMat, [
+    const [screenFromX, screenFromY] = applyToPoint14(realToCanvasMat, [
       fromOffset.x,
       fromOffset.y
     ]);
-    const [screenToX, screenToY] = applyToPoint13(realToCanvasMat, [
+    const [screenToX, screenToY] = applyToPoint14(realToCanvasMat, [
       toOffset.x,
       toOffset.y
     ]);
@@ -2158,15 +2246,15 @@ function drawPcbFabricationNoteDimension(params) {
 }
 
 // lib/drawer/elements/pcb-note-line.ts
-import { applyToPoint as applyToPoint14 } from "transformation-matrix";
+import { applyToPoint as applyToPoint15 } from "transformation-matrix";
 function drawPcbNoteLine(params) {
   const { ctx, line, realToCanvasMat, colorMap } = params;
   const defaultColor = "rgb(89, 148, 220)";
   const color = line.color ?? defaultColor;
   const strokeWidth = line.stroke_width ?? 0.1;
   const isDashed = line.is_dashed ?? false;
-  const [x1, y1] = applyToPoint14(realToCanvasMat, [line.x1, line.y1]);
-  const [x2, y2] = applyToPoint14(realToCanvasMat, [line.x2, line.y2]);
+  const [x1, y1] = applyToPoint15(realToCanvasMat, [line.x1, line.y1]);
+  const [x2, y2] = applyToPoint15(realToCanvasMat, [line.x2, line.y2]);
   const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
   ctx.save();
   if (isDashed) {
@@ -2271,7 +2359,7 @@ var CircuitToCanvasDrawer = class {
     if (outline && Array.isArray(outline) && outline.length >= 3) {
       const soldermaskColor = this.colorMap.soldermask[layer] ?? this.colorMap.soldermask.top;
       const canvasPoints = outline.map((p) => {
-        const [x, y] = applyToPoint15(this.realToCanvasMat, [p.x, p.y]);
+        const [x, y] = applyToPoint16(this.realToCanvasMat, [p.x, p.y]);
         return { x, y };
       });
       this.ctx.beginPath();
@@ -2442,6 +2530,14 @@ var CircuitToCanvasDrawer = class {
         colorMap: this.colorMap
       });
     }
+    if (element.type === "pcb_keepout") {
+      drawPcbKeepout({
+        ctx: this.ctx,
+        keepout: element,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
     if (element.type === "pcb_copper_pour") {
       drawPcbCopperPour({
         ctx: this.ctx,
@@ -2566,6 +2662,7 @@ export {
   drawPcbFabricationNoteRect,
   drawPcbFabricationNoteText,
   drawPcbHole,
+  drawPcbKeepout,
   drawPcbNoteDimension,
   drawPcbNotePath,
   drawPcbNoteRect,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -14,6 +14,7 @@ import type {
   PcbSilkscreenPath,
   PcbSilkscreenPill,
   PcbCutout,
+  PCBKeepout,
   PcbCopperPour,
   PcbCopperText,
   PcbFabricationNoteText,
@@ -59,6 +60,7 @@ import { drawPcbSilkscreenPath } from "./elements/pcb-silkscreen-path"
 import { drawPcbSilkscreenOval } from "./elements/pcb-silkscreen-oval"
 import { drawPcbSilkscreenPill } from "./elements/pcb-silkscreen-pill"
 import { drawPcbCutout } from "./elements/pcb-cutout"
+import { drawPcbKeepout } from "./elements/pcb-keepout"
 import { drawPcbCopperPour } from "./elements/pcb-copper-pour"
 import { drawPcbCopperText } from "./elements/pcb-copper-text"
 import { drawPcbFabricationNoteText } from "./elements/pcb-fabrication-note-text"
@@ -410,6 +412,15 @@ export class CircuitToCanvasDrawer {
       })
     }
 
+    if (element.type === "pcb_keepout") {
+      drawPcbKeepout({
+        ctx: this.ctx,
+        keepout: element as PCBKeepout,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
     if (element.type === "pcb_copper_pour") {
       drawPcbCopperPour({
         ctx: this.ctx,

package/lib/drawer/elements/index.ts

@@ -56,6 +56,8 @@ export {
 
 export { drawPcbCutout, type DrawPcbCutoutParams } from "./pcb-cutout"
 
+export { drawPcbKeepout, type DrawPcbKeepoutParams } from "./pcb-keepout"
+
 export {
   drawPcbCopperPour,
   type DrawPcbCopperPourParams,

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

@@ -0,0 +1,136 @@
+import type { PCBKeepout } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+
+export interface DrawPcbKeepoutParams {
+  ctx: CanvasContext
+  keepout: PCBKeepout
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+/**
+ * Converts hex color to rgba with transparency
+ */
+function hexToRgba(hex: string, alpha: number): string {
+  const r = parseInt(hex.slice(1, 3), 16)
+  const g = parseInt(hex.slice(3, 5), 16)
+  const b = parseInt(hex.slice(5, 7), 16)
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+export function drawPcbKeepout(params: DrawPcbKeepoutParams): void {
+  const { ctx, keepout, realToCanvasMat, colorMap } = params
+
+  // Keepout zones are shown with transparent red background and diagonal red lines pattern
+  const strokeColor = colorMap.keepout
+  const fillColor = hexToRgba(colorMap.keepout, 0.2) // Slight transparent red background
+  const hatchSpacing = 1.0 // Spacing between diagonal lines
+
+  if (keepout.shape === "rect") {
+    const [cx, cy] = applyToPoint(realToCanvasMat, [
+      keepout.center.x,
+      keepout.center.y,
+    ])
+    const scaledWidth = keepout.width * Math.abs(realToCanvasMat.a)
+    const scaledHeight = keepout.height * Math.abs(realToCanvasMat.a)
+    const rotation = (keepout as { rotation?: number }).rotation ?? 0
+
+    ctx.save()
+    ctx.translate(cx, cy)
+
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * (Math.PI / 180))
+    }
+
+    // Draw transparent red background
+    ctx.beginPath()
+    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight)
+    ctx.fillStyle = fillColor
+    ctx.fill()
+
+    // Set up clipping path for the rectangle
+    ctx.beginPath()
+    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight)
+    ctx.clip()
+
+    // Draw diagonal lines pattern at 45 degrees
+    const scaledSpacing = hatchSpacing * Math.abs(realToCanvasMat.a)
+    const diagonal = Math.sqrt(
+      scaledWidth * scaledWidth + scaledHeight * scaledHeight,
+    )
+    const halfWidth = scaledWidth / 2
+    const halfHeight = scaledHeight / 2
+
+    ctx.strokeStyle = strokeColor
+    ctx.lineWidth = 0.15 * Math.abs(realToCanvasMat.a)
+    ctx.setLineDash([])
+
+    // Draw diagonal lines from top-left to bottom-right
+    for (
+      let offset = -diagonal;
+      offset < diagonal * 2;
+      offset += scaledSpacing
+    ) {
+      ctx.beginPath()
+      // Line goes from left edge to right edge (or top to bottom)
+      const startX = -halfWidth + offset
+      const startY = -halfHeight
+      const endX = -halfWidth + offset + diagonal
+      const endY = -halfHeight + diagonal
+
+      ctx.moveTo(startX, startY)
+      ctx.lineTo(endX, endY)
+      ctx.stroke()
+    }
+
+    ctx.restore()
+    return
+  }
+
+  if (keepout.shape === "circle") {
+    const [cx, cy] = applyToPoint(realToCanvasMat, [
+      keepout.center.x,
+      keepout.center.y,
+    ])
+    const scaledRadius = keepout.radius * Math.abs(realToCanvasMat.a)
+    const scaledSpacing = hatchSpacing * Math.abs(realToCanvasMat.a)
+
+    ctx.save()
+    ctx.translate(cx, cy)
+
+    // Draw transparent red background
+    ctx.beginPath()
+    ctx.arc(0, 0, scaledRadius, 0, Math.PI * 2)
+    ctx.fillStyle = fillColor
+    ctx.fill()
+
+    // Set up clipping path for the circle
+    ctx.beginPath()
+    ctx.arc(0, 0, scaledRadius, 0, Math.PI * 2)
+    ctx.clip()
+
+    // Draw diagonal lines pattern at 45 degrees
+    const diagonal = scaledRadius * 2
+
+    ctx.strokeStyle = strokeColor
+    ctx.lineWidth = 0.15 * Math.abs(realToCanvasMat.a)
+    ctx.setLineDash([])
+
+    // Draw diagonal lines from top-left to bottom-right
+    for (
+      let offset = -diagonal;
+      offset < diagonal * 2;
+      offset += scaledSpacing
+    ) {
+      ctx.beginPath()
+      ctx.moveTo(offset - diagonal, -diagonal)
+      ctx.lineTo(offset + diagonal, diagonal)
+      ctx.stroke()
+    }
+
+    ctx.restore()
+    return
+  }
+}

package/lib/drawer/shapes/rect.ts

@@ -46,13 +46,6 @@ export function drawRect(params: DrawRectParams): void {
     ctx.rotate(-rotation * (Math.PI / 180))
   }
 
-  // Set up dashed line if needed
-  if (isStrokeDashed && scaledStrokeWidth) {
-    ctx.setLineDash([scaledStrokeWidth * 2, scaledStrokeWidth * 2])
-  } else {
-    ctx.setLineDash([])
-  }
-
   ctx.beginPath()
 
   if (scaledRadius > 0) {
@@ -85,6 +78,12 @@ export function drawRect(params: DrawRectParams): void {
   }
 
   if (stroke && scaledStrokeWidth) {
+    // Set up dashed line if needed (after path is drawn, before stroke)
+    if (isStrokeDashed) {
+      ctx.setLineDash([scaledStrokeWidth * 3, scaledStrokeWidth * 2])
+    } else {
+      ctx.setLineDash([])
+    }
     ctx.strokeStyle = stroke
     ctx.lineWidth = scaledStrokeWidth
     ctx.stroke()

package/lib/drawer/types.ts

@@ -31,6 +31,7 @@ export interface CanvasContext {
   moveTo(x: number, y: number): void
   save(): void
   restore(): void
+  clip(): void
   translate(x: number, y: number): void
   rotate(angle: number): void
   scale(x: number, y: number): void
@@ -89,6 +90,7 @@ export interface PcbColorMap {
   }
   substrate: string
   courtyard: string
+  keepout: string
 }
 
 export const DEFAULT_PCB_COLOR_MAP: PcbColorMap = {
@@ -122,6 +124,7 @@ export const DEFAULT_PCB_COLOR_MAP: PcbColorMap = {
   },
   boardOutline: "rgba(255, 255, 255, 0.5)",
   courtyard: "#FF00FF",
+  keepout: "#FF6B6B", // Red color for keepout zones
 }
 
 export interface DrawerConfig {

package/package.json

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

package/tests/elements/pcb-keepout-layer-filter.test.ts

@@ -0,0 +1,51 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { AnyCircuitElement } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("pcb keepout with layer filter", async () => {
+  const canvas = createCanvas(2000, 1600)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  drawer.setCameraBounds({ minX: -25, maxX: 25, minY: -20, maxY: 20 })
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+  const elements: AnyCircuitElement[] = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "pcb_board_0",
+      center: { x: 0, y: 0 },
+      width: 50,
+      height: 40,
+      material: "fr1",
+      num_layers: 2,
+      thickness: 1.2,
+    },
+    {
+      type: "pcb_keepout",
+      shape: "rect",
+      pcb_keepout_id: "pcb_keepout_top",
+      center: { x: -10, y: 0 },
+      width: 8,
+      height: 8,
+      layers: ["top"],
+    },
+    {
+      type: "pcb_keepout",
+      shape: "circle",
+      pcb_keepout_id: "pcb_keepout_bottom",
+      center: { x: 10, y: 0 },
+      radius: 4,
+      layers: ["bottom"],
+    },
+  ]
+
+  drawer.drawElements(elements, { layers: ["top_copper"] })
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-keepout-multiple-layers.test.ts

@@ -0,0 +1,51 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { AnyCircuitElement } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("pcb keepout multiple layers", async () => {
+  const canvas = createCanvas(2000, 1600)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  drawer.setCameraBounds({ minX: -25, maxX: 25, minY: -20, maxY: 20 })
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+  const elements: AnyCircuitElement[] = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "pcb_board_0",
+      center: { x: 0, y: 0 },
+      width: 50,
+      height: 40,
+      material: "fr1",
+      num_layers: 4,
+      thickness: 1.2,
+    },
+    {
+      type: "pcb_keepout",
+      shape: "rect",
+      pcb_keepout_id: "pcb_keepout_multi_layer",
+      center: { x: 0, y: 0 },
+      width: 10,
+      height: 10,
+      layers: ["top", "bottom", "inner1"],
+    },
+    {
+      type: "pcb_keepout",
+      shape: "circle",
+      pcb_keepout_id: "pcb_keepout_circle_multi",
+      center: { x: 15, y: 15 },
+      radius: 5,
+      layers: ["top", "bottom"],
+    },
+  ]
+
+  drawer.drawElements(elements)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-keepout-rect-and-circle.test.ts

@@ -0,0 +1,60 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { AnyCircuitElement } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("pcb keepout rect and circle", async () => {
+  const canvas = createCanvas(2000, 1600)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  drawer.setCameraBounds({ minX: -25, maxX: 25, minY: -20, maxY: 20 })
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+  const elements: AnyCircuitElement[] = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "pcb_board_0",
+      center: { x: 0, y: 0 },
+      width: 50,
+      height: 40,
+      material: "fr1",
+      num_layers: 2,
+      thickness: 1.2,
+    },
+    {
+      type: "pcb_keepout",
+      shape: "rect",
+      pcb_keepout_id: "pcb_keepout_rect_0",
+      center: { x: -10, y: 10 },
+      width: 8,
+      height: 5,
+      layers: ["top"],
+    },
+    {
+      type: "pcb_keepout",
+      shape: "circle",
+      pcb_keepout_id: "pcb_keepout_circle_0",
+      center: { x: 0, y: 0 },
+      radius: 4,
+      layers: ["top"],
+    },
+    {
+      type: "pcb_keepout",
+      shape: "rect",
+      pcb_keepout_id: "pcb_keepout_rect_1",
+      center: { x: 10, y: -10 },
+      width: 6,
+      height: 6,
+      layers: ["bottom"],
+    },
+  ]
+
+  drawer.drawElements(elements)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-keepout-with-group-id.test.ts

@@ -0,0 +1,45 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { AnyCircuitElement } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("pcb keepout with pcb_group_id and subcircuit_id", async () => {
+  const canvas = createCanvas(2000, 1600)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  drawer.setCameraBounds({ minX: -25, maxX: 25, minY: -20, maxY: 20 })
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+  const elements: AnyCircuitElement[] = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "pcb_board_0",
+      center: { x: 0, y: 0 },
+      width: 50,
+      height: 40,
+      material: "fr1",
+      num_layers: 2,
+      thickness: 1.2,
+    },
+    {
+      type: "pcb_keepout",
+      shape: "rect",
+      pcb_keepout_id: "pcb_keepout_grouped",
+      center: { x: 0, y: 0 },
+      width: 10,
+      height: 10,
+      layers: ["top"],
+      pcb_group_id: "group_1",
+      subcircuit_id: "subcircuit_1",
+    },
+  ]
+
+  drawer.drawElements(elements)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})