circuit-to-canvas 0.0.2 → 0.0.4

package/README.md

@@ -30,3 +30,67 @@ There are two "types" of layers:
 - Layer groups "top" (includes "top_copper", "top_soldermask")
 
 inner layers go by the name inner1, inner2 etc.
+
+## Feature Parity with circuit-to-svg
+
+This checklist tracks PCB drawing features from [circuit-to-svg](https://github.com/tscircuit/circuit-to-svg) that are implemented in circuit-to-canvas.
+
+### PCB Elements
+
+- [x] `pcb_board` - Board outline with center/width/height or custom outline
+- [x] `pcb_trace` - PCB traces with route points
+- [x] `pcb_via` - Via holes
+- [x] `pcb_plated_hole` - Plated through-holes (circular, pill, oval shapes)
+- [x] `pcb_hole` - Non-plated holes (circular, square, oval shapes)
+- [x] `pcb_smtpad` - SMT pads (rect, circle, rotated_rect, pill shapes)
+- [x] `pcb_copper_pour` - Copper pour areas (rect, polygon shapes)
+- [x] `pcb_cutout` - Board cutouts (rect, circle, polygon shapes)
+
+### Silkscreen Elements
+
+- [x] `pcb_silkscreen_text` - Text on silkscreen layer
+- [x] `pcb_silkscreen_rect` - Rectangles on silkscreen
+- [x] `pcb_silkscreen_circle` - Circles on silkscreen
+- [x] `pcb_silkscreen_line` - Lines on silkscreen
+- [x] `pcb_silkscreen_path` - Paths/routes on silkscreen
+
+### Copper Text
+
+- [ ] `pcb_copper_text` - Text rendered on copper layers (supports knockout mode, mirroring)
+
+### Error Visualization
+
+- [ ] `pcb_trace_error` - Trace routing error indicators
+- [ ] `pcb_footprint_overlap_error` - Footprint overlap error indicators
+
+### Debug/Development Features
+
+- [ ] `pcb_component` - Component bounding box visualization
+- [ ] `pcb_group` - PCB group visualization with dashed outlines
+- [ ] `pcb_courtyard_rect` - Component courtyard rectangles
+
+### Fabrication Notes
+
+- [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
+
+### Annotation/Notes
+
+- [ ] `pcb_note_text` - General note text
+- [ ] `pcb_note_rect` - Note rectangles
+- [ ] `pcb_note_path` - Note paths
+- [ ] `pcb_note_line` - Note lines
+- [ ] `pcb_note_dimension` - Dimension annotations
+
+### Panel Support
+
+- [ ] `pcb_panel` - PCB panel outlines for panelization
+
+### Visualization Features
+
+- [ ] Rats nest visualization - Unrouted connection indicators
+- [ ] PCB grid overlay - Configurable grid with major/minor lines
+- [ ] Soldermask rendering - Soldermask layer visualization
+- [ ] Anchor offset indicators - Debug indicators for relative positioning

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"