circuit-to-canvas 0.0.3 → 0.0.4

package/README.md

@@ -71,7 +71,7 @@ This checklist tracks PCB drawing features from [circuit-to-svg](https://github.
 
 ### Fabrication Notes
 
-- [ ] `pcb_fabrication_note_text` - Fabrication note text
+- [x] `pcb_fabrication_note_text` - Fabrication note text
 - [ ] `pcb_fabrication_note_rect` - Fabrication note rectangles
 - [ ] `pcb_fabrication_note_path` - Fabrication note paths
 - [ ] `pcb_fabrication_note_dimension` - Fabrication dimension annotations

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyCircuitElement, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbCutout, PcbCopperPour } from 'circuit-json';
+import { AnyCircuitElement, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbFabricationNotePath } from 'circuit-json';
 import { Matrix } from 'transformation-matrix';
 
 /**
@@ -21,16 +21,24 @@ interface CanvasContext {
     translate(x: number, y: number): void;
     rotate(angle: number): void;
     scale(x: number, y: number): void;
+    globalCompositeOperation?: string;
     fillStyle: string | CanvasGradient | CanvasPattern;
     strokeStyle: string | CanvasGradient | CanvasPattern;
     lineWidth: number;
     lineCap: "butt" | "round" | "square";
     lineJoin: "bevel" | "round" | "miter";
+    setLineDash(segments: number[]): void;
     canvas: {
         width: number;
         height: number;
     };
     fillText(text: string, x: number, y: number): void;
+    fillRect(x: number, y: number, width: number, height: number): void;
+    measureText?: (text: string) => {
+        width: number;
+        actualBoundingBoxAscent?: number;
+        actualBoundingBoxDescent?: number;
+    };
     font: string;
     textAlign: "start" | "end" | "left" | "right" | "center";
     textBaseline: "top" | "hanging" | "middle" | "alphabetic" | "ideographic" | "bottom";
@@ -115,10 +123,13 @@ interface DrawRectParams {
     };
     width: number;
     height: number;
-    fill: string;
+    fill?: string;
     transform: Matrix;
     borderRadius?: number;
     rotation?: number;
+    stroke?: string;
+    strokeWidth?: number;
+    isStrokeDashed?: boolean;
 }
 declare function drawRect(params: DrawRectParams): void;
 
@@ -192,6 +203,34 @@ interface DrawPathParams {
 }
 declare function drawPath(params: DrawPathParams): void;
 
+type AlphabetLayout = {
+    width: number;
+    height: number;
+    glyphWidth: number;
+    letterSpacing: number;
+    spaceWidth: number;
+    strokeWidth: number;
+};
+declare function getAlphabetLayout(text: string, fontSize: number): AlphabetLayout;
+type AnchorAlignment = "center" | "top_left" | "top_right" | "bottom_left" | "bottom_right" | "left" | "right" | "top" | "bottom";
+declare function getTextStartPosition(alignment: AnchorAlignment, layout: AlphabetLayout): {
+    x: number;
+    y: number;
+};
+declare function strokeAlphabetText(ctx: CanvasContext, text: string, layout: AlphabetLayout, startX: number, startY: number): void;
+interface DrawTextParams {
+    ctx: CanvasContext;
+    text: string;
+    x: number;
+    y: number;
+    fontSize: number;
+    color: string;
+    transform: Matrix;
+    anchorAlignment: AnchorAlignment;
+    rotation?: number;
+}
+declare function drawText(params: DrawTextParams): void;
+
 interface DrawPcbPlatedHoleParams {
     ctx: CanvasContext;
     hole: PcbPlatedHole;
@@ -292,4 +331,36 @@ interface DrawPcbCopperPourParams {
 }
 declare function drawPcbCopperPour(params: DrawPcbCopperPourParams): void;
 
-export { type CameraBounds, type CanvasContext, CircuitToCanvasDrawer, type CopperColorMap, type CopperLayerName, DEFAULT_PCB_COLOR_MAP, type DrawCircleParams, type DrawContext, type DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCutoutParams, type DrawPcbHoleParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, type DrawPcbSilkscreenPathParams, type DrawPcbSilkscreenRectParams, type DrawPcbSilkscreenTextParams, type DrawPcbSmtPadParams, type DrawPcbTraceParams, type DrawPcbViaParams, type DrawPillParams, type DrawPolygonParams, type DrawRectParams, type DrawerConfig, type PcbColorMap, drawCircle, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCutout, drawPcbHole, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenPath, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect };
+interface DrawPcbCopperTextParams {
+    ctx: CanvasContext;
+    text: PcbCopperText;
+    transform: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbCopperText(params: DrawPcbCopperTextParams): void;
+
+interface DrawPcbFabricationNoteTextParams {
+    ctx: CanvasContext;
+    text: PcbFabricationNoteText;
+    transform: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbFabricationNoteText(params: DrawPcbFabricationNoteTextParams): void;
+
+interface DrawPcbFabricationNoteRectParams {
+    ctx: CanvasContext;
+    rect: PcbFabricationNoteRect;
+    transform: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbFabricationNoteRect(params: DrawPcbFabricationNoteRectParams): void;
+
+interface DrawPcbFabricationNotePathParams {
+    ctx: CanvasContext;
+    path: PcbFabricationNotePath;
+    transform: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbFabricationNotePath(params: DrawPcbFabricationNotePathParams): void;
+
+export { type AlphabetLayout, type AnchorAlignment, type CameraBounds, type CanvasContext, CircuitToCanvasDrawer, type CopperColorMap, type CopperLayerName, DEFAULT_PCB_COLOR_MAP, type DrawCircleParams, type DrawContext, type DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCopperTextParams, type DrawPcbCutoutParams, type DrawPcbFabricationNotePathParams, type DrawPcbFabricationNoteRectParams, type DrawPcbFabricationNoteTextParams, type DrawPcbHoleParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, type DrawPcbSilkscreenPathParams, type DrawPcbSilkscreenRectParams, type DrawPcbSilkscreenTextParams, type DrawPcbSmtPadParams, type DrawPcbTraceParams, type DrawPcbViaParams, type DrawPillParams, type DrawPolygonParams, type DrawRectParams, type DrawTextParams, type DrawerConfig, type PcbColorMap, drawCircle, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenPath, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };

package/dist/index.js

@@ -58,17 +58,26 @@ function drawRect(params) {
     fill,
     transform,
     borderRadius = 0,
-    rotation = 0
+    rotation = 0,
+    stroke,
+    strokeWidth,
+    isStrokeDashed = false
   } = params;
   const [cx, cy] = applyToPoint2(transform, [center.x, center.y]);
   const scaledWidth = width * Math.abs(transform.a);
   const scaledHeight = height * Math.abs(transform.a);
   const scaledRadius = borderRadius * Math.abs(transform.a);
+  const scaledStrokeWidth = strokeWidth ? strokeWidth * Math.abs(transform.a) : void 0;
   ctx.save();
   ctx.translate(cx, cy);
   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;
@@ -92,8 +101,15 @@ function drawRect(params) {
   } else {
     ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
   }
-  ctx.fillStyle = fill;
-  ctx.fill();
+  if (fill) {
+    ctx.fillStyle = fill;
+    ctx.fill();
+  }
+  if (stroke && scaledStrokeWidth) {
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = scaledStrokeWidth;
+    ctx.stroke();
+  }
   ctx.restore();
 }
 
@@ -794,6 +810,272 @@ function drawPcbCopperPour(params) {
   ctx.restore();
 }
 
+// lib/drawer/elements/pcb-copper-text.ts
+import { applyToPoint as applyToPoint11 } from "transformation-matrix";
+
+// lib/drawer/shapes/text.ts
+import { lineAlphabet } from "@tscircuit/alphabet";
+import { applyToPoint as applyToPoint10 } from "transformation-matrix";
+var GLYPH_WIDTH_RATIO = 0.62;
+var LETTER_SPACING_RATIO = 0.3;
+var SPACE_WIDTH_RATIO = 1;
+var STROKE_WIDTH_RATIO = 0.13;
+var CURVED_GLYPHS = /* @__PURE__ */ new Set(["O", "o", "0"]);
+function getAlphabetLayout(text, fontSize) {
+  const glyphWidth = fontSize * GLYPH_WIDTH_RATIO;
+  const letterSpacing = glyphWidth * LETTER_SPACING_RATIO;
+  const spaceWidth = glyphWidth * SPACE_WIDTH_RATIO;
+  const characters = Array.from(text);
+  let width = 0;
+  characters.forEach((char, index) => {
+    const advance = char === " " ? spaceWidth : glyphWidth;
+    width += advance;
+    if (index < characters.length - 1) width += letterSpacing;
+  });
+  const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35);
+  return {
+    width,
+    height: fontSize,
+    glyphWidth,
+    letterSpacing,
+    spaceWidth,
+    strokeWidth
+  };
+}
+var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
+function getTextStartPosition(alignment, layout) {
+  const totalWidth = layout.width + layout.strokeWidth;
+  const totalHeight = layout.height + layout.strokeWidth;
+  let x = 0;
+  let y = 0;
+  if (alignment === "center") {
+    x = -totalWidth / 2;
+  } else if (alignment === "top_left" || alignment === "bottom_left" || alignment === "left") {
+    x = 0;
+  } else if (alignment === "top_right" || alignment === "bottom_right" || alignment === "right") {
+    x = -totalWidth;
+  }
+  if (alignment === "center") {
+    y = -totalHeight / 2;
+  } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top") {
+    y = 0;
+  } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom") {
+    y = -totalHeight;
+  }
+  return { x, y };
+}
+function strokeAlphabetText(ctx, text, layout, startX, startY) {
+  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
+  const yOffset = startY + height / 2;
+  const characters = Array.from(text);
+  let cursor = startX + strokeWidth / 2;
+  characters.forEach((char, index) => {
+    const lines = getGlyphLines(char);
+    const advance = char === " " ? spaceWidth : glyphWidth;
+    if (CURVED_GLYPHS.has(char)) {
+      const radiusX = Math.max(glyphWidth / 2 - strokeWidth / 2, strokeWidth);
+      const radiusY = Math.max(height / 2 - strokeWidth / 2, strokeWidth);
+      const centerY = yOffset - height / 2;
+      ctx.beginPath();
+      ctx.ellipse(
+        cursor + glyphWidth / 2,
+        centerY,
+        radiusX,
+        radiusY,
+        0,
+        0,
+        Math.PI * 2
+      );
+      ctx.stroke();
+    } else if (lines?.length) {
+      ctx.beginPath();
+      for (const line of lines) {
+        const x1 = cursor + line.x1 * glyphWidth;
+        const y1 = yOffset - line.y1 * height;
+        const x2 = cursor + line.x2 * glyphWidth;
+        const y2 = yOffset - line.y2 * height;
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+      }
+      ctx.stroke();
+    }
+    cursor += advance;
+    if (index < characters.length - 1) {
+      cursor += letterSpacing;
+    }
+  });
+}
+function drawText(params) {
+  const {
+    ctx,
+    text,
+    x,
+    y,
+    fontSize,
+    color,
+    transform,
+    anchorAlignment,
+    rotation = 0
+  } = params;
+  if (!text) return;
+  const [transformedX, transformedY] = applyToPoint10(transform, [x, y]);
+  const scale2 = Math.abs(transform.a);
+  const scaledFontSize = fontSize * scale2;
+  const layout = getAlphabetLayout(text, scaledFontSize);
+  const startPos = getTextStartPosition(anchorAlignment, layout);
+  ctx.save();
+  ctx.translate(transformedX, transformedY);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
+  ctx.lineWidth = layout.strokeWidth;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.strokeStyle = color;
+  strokeAlphabetText(
+    ctx,
+    text,
+    layout,
+    startPos.x,
+    startPos.y + layout.strokeWidth / 2
+  );
+  ctx.restore();
+}
+
+// lib/drawer/elements/pcb-copper-text.ts
+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;
+}
+function mapAnchorAlignment2(alignment) {
+  if (!alignment) return "center";
+  if (alignment.includes("left")) return "left";
+  if (alignment.includes("right")) return "right";
+  return "center";
+}
+function drawPcbCopperText(params) {
+  const { ctx, text, transform, colorMap } = params;
+  const content = text.text ?? "";
+  if (!content) return;
+  const [x, y] = applyToPoint11(transform, [
+    text.anchor_position.x,
+    text.anchor_position.y
+  ]);
+  const scale2 = Math.abs(transform.a);
+  const fontSize = (text.font_size ?? 1) * scale2;
+  const rotation = text.ccw_rotation ?? 0;
+  const padding = {
+    ...DEFAULT_PADDING,
+    ...text.knockout_padding
+  };
+  const textColor = layerToCopperColor(text.layer, colorMap);
+  const layout = getAlphabetLayout(content, fontSize);
+  const totalWidth = layout.width + layout.strokeWidth;
+  const totalHeight = layout.height + layout.strokeWidth;
+  const alignment = mapAnchorAlignment2(text.anchor_alignment);
+  const startPos = getTextStartPosition(alignment, layout);
+  const startX = startPos.x;
+  const startY = 0;
+  ctx.save();
+  ctx.translate(x, y);
+  if (text.is_mirrored) ctx.scale(-1, 1);
+  if (rotation !== 0) ctx.rotate(-rotation * (Math.PI / 180));
+  ctx.lineWidth = layout.strokeWidth;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  if (text.is_knockout) {
+    const paddingLeft = padding.left * scale2;
+    const paddingRight = padding.right * scale2;
+    const paddingTop = padding.top * scale2;
+    const paddingBottom = padding.bottom * scale2;
+    const xOffset = startX - paddingLeft;
+    const yOffset = -(layout.height / 2) - layout.strokeWidth / 2 - paddingTop;
+    const knockoutWidth = totalWidth + paddingLeft + paddingRight;
+    const knockoutHeight = totalHeight + paddingTop + paddingBottom;
+    ctx.fillStyle = textColor;
+    ctx.fillRect(xOffset, yOffset, knockoutWidth, knockoutHeight);
+    const previousCompositeOperation = ctx.globalCompositeOperation;
+    ctx.globalCompositeOperation = "destination-out";
+    ctx.fillStyle = "rgba(0,0,0,1)";
+    ctx.strokeStyle = "rgba(0,0,0,1)";
+    strokeAlphabetText(ctx, content, layout, startX, startY);
+    if (previousCompositeOperation) {
+      ctx.globalCompositeOperation = previousCompositeOperation;
+    } else {
+      ctx.globalCompositeOperation = "source-over";
+    }
+  } else {
+    ctx.strokeStyle = textColor;
+    strokeAlphabetText(ctx, content, layout, startX, startY);
+  }
+  ctx.restore();
+}
+
+// lib/drawer/elements/pcb-fabrication-note-text.ts
+var DEFAULT_FABRICATION_NOTE_COLOR = "rgba(255,255,255,0.5)";
+function layerToColor4(layer, colorMap) {
+  return DEFAULT_FABRICATION_NOTE_COLOR;
+}
+function drawPcbFabricationNoteText(params) {
+  const { ctx, text, transform, colorMap } = params;
+  const defaultColor = layerToColor4(text.layer, colorMap);
+  const color = text.color ?? defaultColor;
+  const fontSize = text.font_size;
+  drawText({
+    ctx,
+    text: text.text,
+    x: text.anchor_position.x,
+    y: text.anchor_position.y,
+    fontSize,
+    color,
+    transform,
+    anchorAlignment: text.anchor_alignment
+  });
+}
+
+// lib/drawer/elements/pcb-fabrication-note-rect.ts
+function drawPcbFabricationNoteRect(params) {
+  const { ctx, rect, transform, colorMap } = params;
+  const defaultColor = "rgba(255,255,255,0.5)";
+  const color = rect.color ?? defaultColor;
+  const isFilled = rect.is_filled ?? false;
+  const hasStroke = rect.has_stroke ?? true;
+  const isStrokeDashed = rect.is_stroke_dashed ?? false;
+  drawRect({
+    ctx,
+    center: rect.center,
+    width: rect.width,
+    height: rect.height,
+    fill: isFilled ? color : void 0,
+    stroke: hasStroke ? color : void 0,
+    strokeWidth: hasStroke ? rect.stroke_width : void 0,
+    borderRadius: rect.corner_radius,
+    transform,
+    isStrokeDashed
+  });
+}
+
+// lib/drawer/elements/pcb-fabrication-note-path.ts
+function drawPcbFabricationNotePath(params) {
+  const { ctx, path, transform, colorMap } = params;
+  const defaultColor = "rgba(255,255,255,0.5)";
+  const color = path.color ?? defaultColor;
+  if (!path.route || path.route.length < 2) return;
+  for (let i = 0; i < path.route.length - 1; i++) {
+    const start = path.route[i];
+    const end = path.route[i + 1];
+    if (!start || !end) continue;
+    drawLine({
+      ctx,
+      start: { x: start.x, y: start.y },
+      end: { x: end.x, y: end.y },
+      strokeWidth: path.stroke_width ?? 0.1,
+      stroke: color,
+      transform
+    });
+  }
+}
+
 // lib/drawer/CircuitToCanvasDrawer.ts
 var CircuitToCanvasDrawer = class {
   ctx;
@@ -967,6 +1249,38 @@ var CircuitToCanvasDrawer = class {
         colorMap: this.colorMap
       });
     }
+    if (element.type === "pcb_copper_text") {
+      drawPcbCopperText({
+        ctx: this.ctx,
+        text: element,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
+    if (element.type === "pcb_fabrication_note_text") {
+      drawPcbFabricationNoteText({
+        ctx: this.ctx,
+        text: element,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
+    if (element.type === "pcb_fabrication_note_rect") {
+      drawPcbFabricationNoteRect({
+        ctx: this.ctx,
+        rect: element,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
+    if (element.type === "pcb_fabrication_note_path") {
+      drawPcbFabricationNotePath({
+        ctx: this.ctx,
+        path: element,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
   }
 };
 export {
@@ -978,7 +1292,11 @@ export {
   drawPath,
   drawPcbBoard,
   drawPcbCopperPour,
+  drawPcbCopperText,
   drawPcbCutout,
+  drawPcbFabricationNotePath,
+  drawPcbFabricationNoteRect,
+  drawPcbFabricationNoteText,
   drawPcbHole,
   drawPcbPlatedHole,
   drawPcbSilkscreenCircle,
@@ -991,5 +1309,9 @@ export {
   drawPcbVia,
   drawPill,
   drawPolygon,
-  drawRect
+  drawRect,
+  drawText,
+  getAlphabetLayout,
+  getTextStartPosition,
+  strokeAlphabetText
 };

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -13,6 +13,10 @@ import type {
   PcbSilkscreenPath,
   PcbCutout,
   PcbCopperPour,
+  PcbCopperText,
+  PcbFabricationNoteText,
+  PcbFabricationNoteRect,
+  PcbFabricationNotePath,
 } from "circuit-json"
 import { identity, compose, translate, scale } from "transformation-matrix"
 import type { Matrix } from "transformation-matrix"
@@ -38,6 +42,10 @@ import {
 } from "./elements/pcb-silkscreen"
 import { drawPcbCutout } from "./elements/pcb-cutout"
 import { drawPcbCopperPour } from "./elements/pcb-copper-pour"
+import { drawPcbCopperText } from "./elements/pcb-copper-text"
+import { drawPcbFabricationNoteText } from "./elements/pcb-fabrication-note-text"
+import { drawPcbFabricationNoteRect } from "./elements/pcb-fabrication-note-rect"
+import { drawPcbFabricationNotePath } from "./elements/pcb-fabrication-note-path"
 
 export interface DrawElementsOptions {
   layers?: string[]
@@ -252,5 +260,41 @@ export class CircuitToCanvasDrawer {
         colorMap: this.colorMap,
       })
     }
+
+    if (element.type === "pcb_copper_text") {
+      drawPcbCopperText({
+        ctx: this.ctx,
+        text: element as PcbCopperText,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_fabrication_note_text") {
+      drawPcbFabricationNoteText({
+        ctx: this.ctx,
+        text: element as PcbFabricationNoteText,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_fabrication_note_rect") {
+      drawPcbFabricationNoteRect({
+        ctx: this.ctx,
+        rect: element as PcbFabricationNoteRect,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
+    if (element.type === "pcb_fabrication_note_path") {
+      drawPcbFabricationNotePath({
+        ctx: this.ctx,
+        path: element as PcbFabricationNotePath,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
   }
 }

package/lib/drawer/elements/index.ts

@@ -32,3 +32,23 @@ export {
   drawPcbCopperPour,
   type DrawPcbCopperPourParams,
 } from "./pcb-copper-pour"
+
+export {
+  drawPcbCopperText,
+  type DrawPcbCopperTextParams,
+} from "./pcb-copper-text"
+
+export {
+  drawPcbFabricationNoteText,
+  type DrawPcbFabricationNoteTextParams,
+} from "./pcb-fabrication-note-text"
+
+export {
+  drawPcbFabricationNoteRect,
+  type DrawPcbFabricationNoteRectParams,
+} from "./pcb-fabrication-note-rect"
+
+export {
+  drawPcbFabricationNotePath,
+  type DrawPcbFabricationNotePathParams,
+} from "./pcb-fabrication-note-path"

package/lib/drawer/elements/pcb-copper-text.ts

@@ -0,0 +1,99 @@
+import type { PcbCopperText } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import {
+  getAlphabetLayout,
+  strokeAlphabetText,
+  getTextStartPosition,
+  type AnchorAlignment,
+} from "../shapes/text"
+
+export interface DrawPcbCopperTextParams {
+  ctx: CanvasContext
+  text: PcbCopperText
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+const DEFAULT_PADDING = { left: 0.2, right: 0.2, top: 0.2, bottom: 0.2 }
+
+function layerToCopperColor(layer: string, colorMap: PcbColorMap): string {
+  return (
+    colorMap.copper[layer as keyof typeof colorMap.copper] ??
+    colorMap.copper.top
+  )
+}
+
+function mapAnchorAlignment(alignment?: string): AnchorAlignment {
+  if (!alignment) return "center"
+  if (alignment.includes("left")) return "left"
+  if (alignment.includes("right")) return "right"
+  return "center"
+}
+
+export function drawPcbCopperText(params: DrawPcbCopperTextParams): void {
+  const { ctx, text, transform, colorMap } = params
+
+  const content = text.text ?? ""
+  if (!content) return
+
+  const [x, y] = applyToPoint(transform, [
+    text.anchor_position.x,
+    text.anchor_position.y,
+  ])
+  const scale = Math.abs(transform.a)
+  const fontSize = (text.font_size ?? 1) * scale
+  const rotation = text.ccw_rotation ?? 0
+  const padding = {
+    ...DEFAULT_PADDING,
+    ...text.knockout_padding,
+  }
+  const textColor = layerToCopperColor(text.layer, colorMap)
+  const layout = getAlphabetLayout(content, fontSize)
+  const totalWidth = layout.width + layout.strokeWidth
+  const totalHeight = layout.height + layout.strokeWidth
+  const alignment = mapAnchorAlignment(text.anchor_alignment)
+  const startPos = getTextStartPosition(alignment, layout)
+  // Copper text always centers vertically (startY=0), uses startPos.x for horizontal alignment
+  const startX = startPos.x
+  const startY = 0 // Centers vertically at y=0 (shared function calculates yOffset = startY + height/2)
+
+  ctx.save()
+  ctx.translate(x, y)
+  if (text.is_mirrored) ctx.scale(-1, 1)
+  if (rotation !== 0) ctx.rotate(-rotation * (Math.PI / 180))
+
+  ctx.lineWidth = layout.strokeWidth
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+
+  if (text.is_knockout) {
+    const paddingLeft = padding.left * scale
+    const paddingRight = padding.right * scale
+    const paddingTop = padding.top * scale
+    const paddingBottom = padding.bottom * scale
+    const xOffset = startX - paddingLeft
+    const yOffset = -(layout.height / 2) - layout.strokeWidth / 2 - paddingTop
+    const knockoutWidth = totalWidth + paddingLeft + paddingRight
+    const knockoutHeight = totalHeight + paddingTop + paddingBottom
+
+    ctx.fillStyle = textColor
+    ctx.fillRect(xOffset, yOffset, knockoutWidth, knockoutHeight)
+
+    const previousCompositeOperation = ctx.globalCompositeOperation
+    ctx.globalCompositeOperation = "destination-out"
+    ctx.fillStyle = "rgba(0,0,0,1)"
+    ctx.strokeStyle = "rgba(0,0,0,1)"
+    strokeAlphabetText(ctx, content, layout, startX, startY)
+    if (previousCompositeOperation) {
+      ctx.globalCompositeOperation = previousCompositeOperation
+    } else {
+      ctx.globalCompositeOperation = "source-over"
+    }
+  } else {
+    ctx.strokeStyle = textColor
+    strokeAlphabetText(ctx, content, layout, startX, startY)
+  }
+  ctx.restore()
+}