circuit-to-canvas 0.0.21 → 0.0.23

package/dist/index.d.ts

@@ -300,34 +300,38 @@ interface DrawPcbSilkscreenTextParams {
     realToCanvasMat: Matrix;
     colorMap: PcbColorMap;
 }
+declare function drawPcbSilkscreenText(params: DrawPcbSilkscreenTextParams): void;
+
 interface DrawPcbSilkscreenRectParams {
     ctx: CanvasContext;
     rect: PcbSilkscreenRect;
     realToCanvasMat: Matrix;
     colorMap: PcbColorMap;
 }
+declare function drawPcbSilkscreenRect(params: DrawPcbSilkscreenRectParams): void;
+
 interface DrawPcbSilkscreenCircleParams {
     ctx: CanvasContext;
     circle: PcbSilkscreenCircle;
     realToCanvasMat: Matrix;
     colorMap: PcbColorMap;
 }
+declare function drawPcbSilkscreenCircle(params: DrawPcbSilkscreenCircleParams): void;
+
 interface DrawPcbSilkscreenLineParams {
     ctx: CanvasContext;
     line: PcbSilkscreenLine;
     realToCanvasMat: Matrix;
     colorMap: PcbColorMap;
 }
+declare function drawPcbSilkscreenLine(params: DrawPcbSilkscreenLineParams): void;
+
 interface DrawPcbSilkscreenPathParams {
     ctx: CanvasContext;
     path: PcbSilkscreenPath;
     realToCanvasMat: Matrix;
     colorMap: PcbColorMap;
 }
-declare function drawPcbSilkscreenText(params: DrawPcbSilkscreenTextParams): void;
-declare function drawPcbSilkscreenRect(params: DrawPcbSilkscreenRectParams): void;
-declare function drawPcbSilkscreenCircle(params: DrawPcbSilkscreenCircleParams): void;
-declare function drawPcbSilkscreenLine(params: DrawPcbSilkscreenLineParams): void;
 declare function drawPcbSilkscreenPath(params: DrawPcbSilkscreenPathParams): void;
 
 interface DrawPcbCutoutParams {

package/dist/index.js

@@ -647,40 +647,170 @@ function drawPcbBoard(params) {
   }
 }
 
-// lib/drawer/elements/pcb-silkscreen.ts
+// lib/drawer/elements/pcb-silkscreen-text.ts
+import { applyToPoint as applyToPoint9 } from "transformation-matrix";
+
+// lib/drawer/shapes/text/text.ts
+import { lineAlphabet } from "@tscircuit/alphabet";
 import { applyToPoint as applyToPoint8 } from "transformation-matrix";
+
+// lib/drawer/shapes/text/getAlphabetLayout.ts
+var GLYPH_WIDTH_RATIO = 0.62;
+var LETTER_SPACING_RATIO = 0.3;
+var SPACE_WIDTH_RATIO = 1;
+var STROKE_WIDTH_RATIO = 0.13;
+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
+  };
+}
+
+// lib/drawer/shapes/text/getTextStartPosition.ts
+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 === "center_left") {
+    x = 0;
+  } else if (alignment === "top_right" || alignment === "bottom_right" || alignment === "center_right") {
+    x = -totalWidth;
+  }
+  if (alignment === "center") {
+    y = -totalHeight / 2;
+  } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top_center") {
+    y = 0;
+  } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom_center") {
+    y = -totalHeight;
+  } else {
+    y = 0;
+  }
+  return { x, y };
+}
+
+// lib/drawer/shapes/text/text.ts
+var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
+function strokeAlphabetText(ctx, text, layout, startX, startY) {
+  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
+  const topY = startY;
+  const characters = Array.from(text);
+  let cursor = startX + strokeWidth / 2;
+  characters.forEach((char, index) => {
+    const lines = getGlyphLines(char);
+    const advance = char === " " ? spaceWidth : glyphWidth;
+    if (lines?.length) {
+      ctx.beginPath();
+      for (const line of lines) {
+        const x1 = cursor + line.x1 * glyphWidth;
+        const y1 = topY + (1 - line.y1) * height;
+        const x2 = cursor + line.x2 * glyphWidth;
+        const y2 = topY + (1 - 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,
+    realToCanvasMat,
+    anchorAlignment,
+    rotation = 0
+  } = params;
+  if (!text) return;
+  const [canvasX, canvasY] = applyToPoint8(realToCanvasMat, [x, y]);
+  const scale2 = Math.abs(realToCanvasMat.a);
+  const scaledFontSize = fontSize * scale2;
+  const layout = getAlphabetLayout(text, scaledFontSize);
+  const startPos = getTextStartPosition(anchorAlignment, layout);
+  ctx.save();
+  ctx.translate(canvasX, canvasY);
+  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);
+  ctx.restore();
+}
+
+// lib/drawer/elements/pcb-silkscreen-text.ts
 function layerToSilkscreenColor(layer, colorMap) {
   return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
 }
 function mapAnchorAlignment(alignment) {
   if (!alignment) return "center";
-  if (alignment.includes("left")) return "left";
-  if (alignment.includes("right")) return "right";
-  return "center";
+  return alignment;
 }
 function drawPcbSilkscreenText(params) {
   const { ctx, text, realToCanvasMat, colorMap } = params;
+  const content = text.text ?? "";
+  if (!content) return;
   const color = layerToSilkscreenColor(text.layer, colorMap);
-  const [x, y] = applyToPoint8(realToCanvasMat, [
+  const [x, y] = applyToPoint9(realToCanvasMat, [
     text.anchor_position.x,
     text.anchor_position.y
   ]);
-  const fontSize = (text.font_size ?? 1) * Math.abs(realToCanvasMat.a);
+  const scale2 = Math.abs(realToCanvasMat.a);
+  const fontSize = (text.font_size ?? 1) * scale2;
   const rotation = text.ccw_rotation ?? 0;
+  const layout = getAlphabetLayout(content, fontSize);
+  const alignment = mapAnchorAlignment(text.anchor_alignment);
+  const startPos = getTextStartPosition(alignment, layout);
   ctx.save();
   ctx.translate(x, y);
   if (rotation !== 0) {
     ctx.rotate(-rotation * (Math.PI / 180));
   }
-  ctx.font = `${fontSize}px sans-serif`;
-  ctx.fillStyle = color;
-  ctx.textAlign = mapAnchorAlignment(text.anchor_alignment);
-  ctx.fillText(text.text, 0, 0);
+  if (text.layer === "bottom") {
+    ctx.scale(-1, 1);
+  }
+  ctx.lineWidth = layout.strokeWidth;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.strokeStyle = color;
+  strokeAlphabetText(ctx, content, layout, startPos.x, startPos.y);
   ctx.restore();
 }
+
+// lib/drawer/elements/pcb-silkscreen-rect.ts
+function layerToSilkscreenColor2(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
 function drawPcbSilkscreenRect(params) {
   const { ctx, rect, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor(rect.layer, colorMap);
+  const color = layerToSilkscreenColor2(rect.layer, colorMap);
   drawRect({
     ctx,
     center: rect.center,
@@ -690,9 +820,14 @@ function drawPcbSilkscreenRect(params) {
     realToCanvasMat
   });
 }
+
+// lib/drawer/elements/pcb-silkscreen-circle.ts
+function layerToSilkscreenColor3(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
 function drawPcbSilkscreenCircle(params) {
   const { ctx, circle, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor(circle.layer, colorMap);
+  const color = layerToSilkscreenColor3(circle.layer, colorMap);
   drawCircle({
     ctx,
     center: circle.center,
@@ -701,9 +836,14 @@ function drawPcbSilkscreenCircle(params) {
     realToCanvasMat
   });
 }
+
+// lib/drawer/elements/pcb-silkscreen-line.ts
+function layerToSilkscreenColor4(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
 function drawPcbSilkscreenLine(params) {
   const { ctx, line, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor(line.layer, colorMap);
+  const color = layerToSilkscreenColor4(line.layer, colorMap);
   drawLine({
     ctx,
     start: { x: line.x1, y: line.y1 },
@@ -713,9 +853,14 @@ function drawPcbSilkscreenLine(params) {
     realToCanvasMat
   });
 }
+
+// lib/drawer/elements/pcb-silkscreen-path.ts
+function layerToSilkscreenColor5(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
 function drawPcbSilkscreenPath(params) {
   const { ctx, path, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor(path.layer, colorMap);
+  const color = layerToSilkscreenColor5(path.layer, colorMap);
   if (!path.route || path.route.length < 2) return;
   for (let i = 0; i < path.route.length - 1; i++) {
     const start = path.route[i];
@@ -771,7 +916,7 @@ function drawPcbCutout(params) {
 }
 
 // lib/drawer/elements/pcb-copper-pour.ts
-import { applyToPoint as applyToPoint9 } from "transformation-matrix";
+import { applyToPoint as applyToPoint10 } from "transformation-matrix";
 function layerToColor3(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
@@ -780,7 +925,7 @@ function drawPcbCopperPour(params) {
   const color = layerToColor3(pour.layer, colorMap);
   ctx.save();
   if (pour.shape === "rect") {
-    const [cx, cy] = applyToPoint9(realToCanvasMat, [
+    const [cx, cy] = applyToPoint10(realToCanvasMat, [
       pour.center.x,
       pour.center.y
     ]);
@@ -801,7 +946,7 @@ function drawPcbCopperPour(params) {
   if (pour.shape === "polygon") {
     if (pour.points && pour.points.length >= 3) {
       const canvasPoints = pour.points.map(
-        (p) => applyToPoint9(realToCanvasMat, [p.x, p.y])
+        (p) => applyToPoint10(realToCanvasMat, [p.x, p.y])
       );
       const firstPoint = canvasPoints[0];
       if (!firstPoint) {
@@ -830,123 +975,6 @@ function drawPcbCopperPour(params) {
 
 // lib/drawer/elements/pcb-copper-text.ts
 import { applyToPoint as applyToPoint11 } from "transformation-matrix";
-
-// lib/drawer/shapes/text/text.ts
-import { lineAlphabet } from "@tscircuit/alphabet";
-import { applyToPoint as applyToPoint10 } from "transformation-matrix";
-
-// lib/drawer/shapes/text/getAlphabetLayout.ts
-var GLYPH_WIDTH_RATIO = 0.62;
-var LETTER_SPACING_RATIO = 0.3;
-var SPACE_WIDTH_RATIO = 1;
-var STROKE_WIDTH_RATIO = 0.13;
-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
-  };
-}
-
-// lib/drawer/shapes/text/getTextStartPosition.ts
-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 === "center_left") {
-    x = 0;
-  } else if (alignment === "top_right" || alignment === "bottom_right" || alignment === "center_right") {
-    x = -totalWidth;
-  }
-  if (alignment === "center") {
-    y = -totalHeight / 2;
-  } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top_center") {
-    y = 0;
-  } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom_center") {
-    y = -totalHeight;
-  } else {
-    y = 0;
-  }
-  return { x, y };
-}
-
-// lib/drawer/shapes/text/text.ts
-var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
-function strokeAlphabetText(ctx, text, layout, startX, startY) {
-  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
-  const topY = startY;
-  const characters = Array.from(text);
-  let cursor = startX + strokeWidth / 2;
-  characters.forEach((char, index) => {
-    const lines = getGlyphLines(char);
-    const advance = char === " " ? spaceWidth : glyphWidth;
-    if (lines?.length) {
-      ctx.beginPath();
-      for (const line of lines) {
-        const x1 = cursor + line.x1 * glyphWidth;
-        const y1 = topY + (1 - line.y1) * height;
-        const x2 = cursor + line.x2 * glyphWidth;
-        const y2 = topY + (1 - 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,
-    realToCanvasMat,
-    anchorAlignment,
-    rotation = 0
-  } = params;
-  if (!text) return;
-  const [canvasX, canvasY] = applyToPoint10(realToCanvasMat, [x, y]);
-  const scale2 = Math.abs(realToCanvasMat.a);
-  const scaledFontSize = fontSize * scale2;
-  const layout = getAlphabetLayout(text, scaledFontSize);
-  const startPos = getTextStartPosition(anchorAlignment, layout);
-  ctx.save();
-  ctx.translate(canvasX, canvasY);
-  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);
-  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;

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -38,13 +38,11 @@ import { drawPcbHole } from "./elements/pcb-hole"
 import { drawPcbSmtPad } from "./elements/pcb-smtpad"
 import { drawPcbTrace } from "./elements/pcb-trace"
 import { drawPcbBoard } from "./elements/pcb-board"
-import {
-  drawPcbSilkscreenText,
-  drawPcbSilkscreenRect,
-  drawPcbSilkscreenCircle,
-  drawPcbSilkscreenLine,
-  drawPcbSilkscreenPath,
-} from "./elements/pcb-silkscreen"
+import { drawPcbSilkscreenText } from "./elements/pcb-silkscreen-text"
+import { drawPcbSilkscreenRect } from "./elements/pcb-silkscreen-rect"
+import { drawPcbSilkscreenCircle } from "./elements/pcb-silkscreen-circle"
+import { drawPcbSilkscreenLine } from "./elements/pcb-silkscreen-line"
+import { drawPcbSilkscreenPath } from "./elements/pcb-silkscreen-path"
 import { drawPcbCutout } from "./elements/pcb-cutout"
 import { drawPcbCopperPour } from "./elements/pcb-copper-pour"
 import { drawPcbCopperText } from "./elements/pcb-copper-text"

package/lib/drawer/elements/index.ts

@@ -15,16 +15,28 @@ export { drawPcbBoard, type DrawPcbBoardParams } from "./pcb-board"
 
 export {
   drawPcbSilkscreenText,
-  drawPcbSilkscreenRect,
-  drawPcbSilkscreenCircle,
-  drawPcbSilkscreenLine,
-  drawPcbSilkscreenPath,
   type DrawPcbSilkscreenTextParams,
+} from "./pcb-silkscreen-text"
+
+export {
+  drawPcbSilkscreenRect,
   type DrawPcbSilkscreenRectParams,
+} from "./pcb-silkscreen-rect"
+
+export {
+  drawPcbSilkscreenCircle,
   type DrawPcbSilkscreenCircleParams,
+} from "./pcb-silkscreen-circle"
+
+export {
+  drawPcbSilkscreenLine,
   type DrawPcbSilkscreenLineParams,
+} from "./pcb-silkscreen-line"
+
+export {
+  drawPcbSilkscreenPath,
   type DrawPcbSilkscreenPathParams,
-} from "./pcb-silkscreen"
+} from "./pcb-silkscreen-path"
 
 export { drawPcbCutout, type DrawPcbCutoutParams } from "./pcb-cutout"
 

package/lib/drawer/elements/pcb-silkscreen-circle.ts

@@ -0,0 +1,33 @@
+import type { PcbSilkscreenCircle } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawCircle } from "../shapes/circle"
+
+export interface DrawPcbSilkscreenCircleParams {
+  ctx: CanvasContext
+  circle: PcbSilkscreenCircle
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+export function drawPcbSilkscreenCircle(
+  params: DrawPcbSilkscreenCircleParams,
+): void {
+  const { ctx, circle, realToCanvasMat, colorMap } = params
+
+  const color = layerToSilkscreenColor(circle.layer, colorMap)
+
+  drawCircle({
+    ctx,
+    center: circle.center,
+    radius: circle.radius,
+    fill: color,
+    realToCanvasMat,
+  })
+}

package/lib/drawer/elements/pcb-silkscreen-line.ts

@@ -0,0 +1,34 @@
+import type { PcbSilkscreenLine } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawLine } from "../shapes/line"
+
+export interface DrawPcbSilkscreenLineParams {
+  ctx: CanvasContext
+  line: PcbSilkscreenLine
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+export function drawPcbSilkscreenLine(
+  params: DrawPcbSilkscreenLineParams,
+): void {
+  const { ctx, line, realToCanvasMat, colorMap } = params
+
+  const color = layerToSilkscreenColor(line.layer, colorMap)
+
+  drawLine({
+    ctx,
+    start: { x: line.x1, y: line.y1 },
+    end: { x: line.x2, y: line.y2 },
+    strokeWidth: line.stroke_width ?? 0.1,
+    stroke: color,
+    realToCanvasMat,
+  })
+}

package/lib/drawer/elements/pcb-silkscreen-path.ts

@@ -0,0 +1,44 @@
+import type { PcbSilkscreenPath } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawLine } from "../shapes/line"
+
+export interface DrawPcbSilkscreenPathParams {
+  ctx: CanvasContext
+  path: PcbSilkscreenPath
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+export function drawPcbSilkscreenPath(
+  params: DrawPcbSilkscreenPathParams,
+): void {
+  const { ctx, path, realToCanvasMat, colorMap } = params
+
+  const color = layerToSilkscreenColor(path.layer, colorMap)
+
+  if (!path.route || path.route.length < 2) return
+
+  // Draw each segment of the path
+  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,
+      realToCanvasMat,
+    })
+  }
+}

package/lib/drawer/elements/pcb-silkscreen-rect.ts

@@ -0,0 +1,34 @@
+import type { PcbSilkscreenRect } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawRect } from "../shapes/rect"
+
+export interface DrawPcbSilkscreenRectParams {
+  ctx: CanvasContext
+  rect: PcbSilkscreenRect
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+export function drawPcbSilkscreenRect(
+  params: DrawPcbSilkscreenRectParams,
+): void {
+  const { ctx, rect, realToCanvasMat, colorMap } = params
+
+  const color = layerToSilkscreenColor(rect.layer, colorMap)
+
+  drawRect({
+    ctx,
+    center: rect.center,
+    width: rect.width,
+    height: rect.height,
+    fill: color,
+    realToCanvasMat,
+  })
+}

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

@@ -0,0 +1,71 @@
+import type { PcbSilkscreenText } 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 DrawPcbSilkscreenTextParams {
+  ctx: CanvasContext
+  text: PcbSilkscreenText
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+function mapAnchorAlignment(alignment?: string): AnchorAlignment {
+  if (!alignment) return "center"
+  return alignment as AnchorAlignment
+}
+
+export function drawPcbSilkscreenText(
+  params: DrawPcbSilkscreenTextParams,
+): void {
+  const { ctx, text, realToCanvasMat, colorMap } = params
+
+  const content = text.text ?? ""
+  if (!content) return
+
+  const color = layerToSilkscreenColor(text.layer, colorMap)
+  const [x, y] = applyToPoint(realToCanvasMat, [
+    text.anchor_position.x,
+    text.anchor_position.y,
+  ])
+  const scale = Math.abs(realToCanvasMat.a)
+  const fontSize = (text.font_size ?? 1) * scale
+  const rotation = text.ccw_rotation ?? 0
+
+  const layout = getAlphabetLayout(content, fontSize)
+  const alignment = mapAnchorAlignment(text.anchor_alignment)
+  const startPos = getTextStartPosition(alignment, layout)
+
+  ctx.save()
+  ctx.translate(x, y)
+
+  // Apply rotation (CCW rotation in degrees)
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180))
+  }
+
+  if (text.layer === "bottom") {
+    ctx.scale(-1, 1)
+  }
+
+  ctx.lineWidth = layout.strokeWidth
+  ctx.lineCap = "round"
+  ctx.lineJoin = "round"
+  ctx.strokeStyle = color
+
+  strokeAlphabetText(ctx, content, layout, startPos.x, startPos.y)
+
+  ctx.restore()
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",
@@ -12,7 +12,7 @@
     "@biomejs/biome": "^2.3.8",
     "@napi-rs/canvas": "^0.1.84",
     "@resvg/resvg-js": "^2.6.2",
-    "@tscircuit/alphabet": "^0.0.9",
+    "@tscircuit/alphabet": "^0.0.17",
     "@tscircuit/circuit-json-util": "^0.0.73",
     "@tscircuit/math-utils": "^0.0.29",
     "@types/bun": "latest",

package/tests/board-snapshot/usb-c-flashlight-board.test.ts

@@ -5,7 +5,7 @@ import usbcFlashlightCircuit from "./usb-c-flashlight.json"
 
 const circuitElements = usbcFlashlightCircuit as AnyCircuitElement[]
 
-test.skip("USB-C flashlight - comprehensive comparison (circuit-to-canvas vs circuit-to-svg)", async () => {
+test("USB-C flashlight - comprehensive comparison (circuit-to-canvas vs circuit-to-svg)", async () => {
   const stackedPng = await getStackedPngSvgComparison(circuitElements, {
     width: 400,
     height: 800,

package/tests/elements/pcb-silkscreen.test.ts

@@ -64,6 +64,116 @@ test("draw silkscreen text bottom layer", async () => {
   )
 })
 
+test("draw silkscreen text with rotation", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  const text: PcbSilkscreenText = {
+    type: "pcb_silkscreen_text",
+    pcb_silkscreen_text_id: "text1",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "ROT45",
+    anchor_position: { x: 50, y: 50 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 8,
+    ccw_rotation: 45,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "silkscreen-text-rotated",
+  )
+})
+
+test("draw silkscreen text bottom layer with rotation - tests transform order", async () => {
+  const canvas = createCanvas(150, 150)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 150, 150)
+
+  // This test verifies the transform order (translate -> rotate -> scale) is correct
+  // by testing bottom layer text with various rotations
+  const texts: PcbSilkscreenText[] = [
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text1",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "0",
+      anchor_position: { x: 75, y: 30 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      ccw_rotation: 0,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text2",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "90",
+      anchor_position: { x: 120, y: 75 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      ccw_rotation: 90,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text3",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "180",
+      anchor_position: { x: 75, y: 120 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      ccw_rotation: 180,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text4",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "270",
+      anchor_position: { x: 30, y: 75 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      ccw_rotation: 270,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text5",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "BTM",
+      anchor_position: { x: 75, y: 75 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 8,
+      ccw_rotation: 45,
+    },
+  ]
+
+  drawer.drawElements(texts)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "silkscreen-text-bottom-rotated",
+  )
+})
+
 test("draw silkscreen rect", async () => {
   const canvas = createCanvas(100, 100)
   const ctx = canvas.getContext("2d")

package/tests/fixtures/stackPngsVertically.ts

@@ -1,7 +1,9 @@
 import { createCanvas, loadImage } from "@napi-rs/canvas"
-import { Resvg } from "@resvg/resvg-js"
+import { Resvg, type ResvgRenderOptions } from "@resvg/resvg-js"
 import * as fs from "node:fs"
+import * as os from "node:os"
 import * as path from "node:path"
+import tscircuitFont from "@tscircuit/alphabet/base64font"
 
 // Pre-generated label PNGs for common labels
 const labelPngCache: Map<string, Buffer> = new Map()
@@ -76,7 +78,44 @@ export const stackPngsVertically = async (
   return canvas.toBuffer("image/png")
 }
 
-export const svgToPng = (svg: string): Buffer => {
-  const resvg = new Resvg(svg)
-  return resvg.render().asPng()
+export const svgToPng = (svgString: string): Buffer => {
+  const fontBuffer = Buffer.from(tscircuitFont, "base64")
+
+  let tempFontPath: string | undefined
+  let cleanupFn: (() => void) | undefined
+
+  try {
+    const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), "resvg-font-"))
+    tempFontPath = path.join(tempDir, "tscircuit-font.ttf")
+    fs.writeFileSync(tempFontPath, fontBuffer)
+
+    cleanupFn = () => {
+      try {
+        fs.unlinkSync(tempFontPath!)
+      } catch {
+        // Ignore errors during cleanup
+      }
+    }
+
+    const opts: ResvgRenderOptions = {
+      font: {
+        fontFiles: [tempFontPath],
+        loadSystemFonts: false,
+        defaultFontFamily: "TscircuitAlphabet",
+        monospaceFamily: "TscircuitAlphabet",
+        sansSerifFamily: "TscircuitAlphabet",
+      },
+    }
+
+    const resvg = new Resvg(svgString, opts)
+    const pngData = resvg.render()
+    const pngBuffer = pngData.asPng()
+
+    return Buffer.from(pngBuffer)
+  } finally {
+    // Clean up temporary font file
+    if (cleanupFn) {
+      cleanupFn()
+    }
+  }
 }

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

@@ -1,170 +0,0 @@
-import type {
-  PcbSilkscreenText,
-  PcbSilkscreenRect,
-  PcbSilkscreenCircle,
-  PcbSilkscreenLine,
-  PcbSilkscreenPath,
-} from "circuit-json"
-import type { Matrix } from "transformation-matrix"
-import { applyToPoint } from "transformation-matrix"
-import type { PcbColorMap, CanvasContext } from "../types"
-import { drawRect } from "../shapes/rect"
-import { drawCircle } from "../shapes/circle"
-import { drawLine } from "../shapes/line"
-import { drawPath } from "../shapes/path"
-
-export interface DrawPcbSilkscreenTextParams {
-  ctx: CanvasContext
-  text: PcbSilkscreenText
-  realToCanvasMat: Matrix
-  colorMap: PcbColorMap
-}
-
-export interface DrawPcbSilkscreenRectParams {
-  ctx: CanvasContext
-  rect: PcbSilkscreenRect
-  realToCanvasMat: Matrix
-  colorMap: PcbColorMap
-}
-
-export interface DrawPcbSilkscreenCircleParams {
-  ctx: CanvasContext
-  circle: PcbSilkscreenCircle
-  realToCanvasMat: Matrix
-  colorMap: PcbColorMap
-}
-
-export interface DrawPcbSilkscreenLineParams {
-  ctx: CanvasContext
-  line: PcbSilkscreenLine
-  realToCanvasMat: Matrix
-  colorMap: PcbColorMap
-}
-
-export interface DrawPcbSilkscreenPathParams {
-  ctx: CanvasContext
-  path: PcbSilkscreenPath
-  realToCanvasMat: Matrix
-  colorMap: PcbColorMap
-}
-
-function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
-  return layer === "bottom"
-    ? colorMap.silkscreen.bottom
-    : colorMap.silkscreen.top
-}
-
-function mapAnchorAlignment(
-  alignment?: string,
-): "start" | "end" | "left" | "right" | "center" {
-  if (!alignment) return "center"
-  if (alignment.includes("left")) return "left"
-  if (alignment.includes("right")) return "right"
-  return "center"
-}
-
-export function drawPcbSilkscreenText(
-  params: DrawPcbSilkscreenTextParams,
-): void {
-  const { ctx, text, realToCanvasMat, colorMap } = params
-
-  const color = layerToSilkscreenColor(text.layer, colorMap)
-  const [x, y] = applyToPoint(realToCanvasMat, [
-    text.anchor_position.x,
-    text.anchor_position.y,
-  ])
-
-  const fontSize = (text.font_size ?? 1) * Math.abs(realToCanvasMat.a)
-  const rotation = text.ccw_rotation ?? 0
-
-  ctx.save()
-  ctx.translate(x, y)
-
-  // Apply rotation (CCW rotation in degrees)
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180))
-  }
-
-  ctx.font = `${fontSize}px sans-serif`
-  ctx.fillStyle = color
-  ctx.textAlign = mapAnchorAlignment(text.anchor_alignment)
-  ctx.fillText(text.text, 0, 0)
-  ctx.restore()
-}
-
-export function drawPcbSilkscreenRect(
-  params: DrawPcbSilkscreenRectParams,
-): void {
-  const { ctx, rect, realToCanvasMat, colorMap } = params
-
-  const color = layerToSilkscreenColor(rect.layer, colorMap)
-
-  drawRect({
-    ctx,
-    center: rect.center,
-    width: rect.width,
-    height: rect.height,
-    fill: color,
-    realToCanvasMat,
-  })
-}
-
-export function drawPcbSilkscreenCircle(
-  params: DrawPcbSilkscreenCircleParams,
-): void {
-  const { ctx, circle, realToCanvasMat, colorMap } = params
-
-  const color = layerToSilkscreenColor(circle.layer, colorMap)
-
-  drawCircle({
-    ctx,
-    center: circle.center,
-    radius: circle.radius,
-    fill: color,
-    realToCanvasMat,
-  })
-}
-
-export function drawPcbSilkscreenLine(
-  params: DrawPcbSilkscreenLineParams,
-): void {
-  const { ctx, line, realToCanvasMat, colorMap } = params
-
-  const color = layerToSilkscreenColor(line.layer, colorMap)
-
-  drawLine({
-    ctx,
-    start: { x: line.x1, y: line.y1 },
-    end: { x: line.x2, y: line.y2 },
-    strokeWidth: line.stroke_width ?? 0.1,
-    stroke: color,
-    realToCanvasMat,
-  })
-}
-
-export function drawPcbSilkscreenPath(
-  params: DrawPcbSilkscreenPathParams,
-): void {
-  const { ctx, path, realToCanvasMat, colorMap } = params
-
-  const color = layerToSilkscreenColor(path.layer, colorMap)
-
-  if (!path.route || path.route.length < 2) return
-
-  // Draw each segment of the path
-  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,
-      realToCanvasMat,
-    })
-  }
-}