circuit-to-canvas 0.0.53 → 0.0.54

package/dist/index.d.ts

@@ -253,12 +253,26 @@ interface DrawDimensionLineParams {
 }
 declare function drawDimensionLine(params: DrawDimensionLineParams): void;
 
+type AlphabetLayout = {
+    width: number;
+    height: number;
+    glyphWidth: number;
+    letterSpacing: number;
+    spaceWidth: number;
+    strokeWidth: number;
+    lineHeight: number;
+    lines: string[];
+    lineWidths: number[];
+};
+declare function getAlphabetLayout(text: string, fontSize: number): AlphabetLayout;
+
 interface StrokeAlphabetTextParams {
     ctx: CanvasContext;
     text: string;
     fontSize: number;
     startX: number;
     startY: number;
+    anchorAlignment?: NinePointAnchor;
 }
 declare function strokeAlphabetText(params: StrokeAlphabetTextParams): void;
 interface DrawTextParams {
@@ -274,16 +288,6 @@ interface DrawTextParams {
 }
 declare function drawText(params: DrawTextParams): 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 = NinePointAnchor;
 declare function getTextStartPosition(alignment: NinePointAnchor, layout: AlphabetLayout): {
     x: number;

package/dist/index.js

@@ -400,25 +400,38 @@ var GLYPH_WIDTH_RATIO = 0.62;
 var LETTER_SPACING_RATIO = 0.3;
 var SPACE_WIDTH_RATIO = 1;
 var STROKE_WIDTH_RATIO = 0.13;
+var LINE_HEIGHT_RATIO = 1.2;
 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);
+  const lineHeight = fontSize * LINE_HEIGHT_RATIO;
+  const lines = text.split("\n");
+  const lineWidths = [];
+  let maxWidth = 0;
+  for (const line of lines) {
+    const characters = Array.from(line);
+    let lineWidth = 0;
+    characters.forEach((char, index) => {
+      const advance = char === " " ? spaceWidth : glyphWidth;
+      lineWidth += advance;
+      if (index < characters.length - 1) lineWidth += letterSpacing;
+    });
+    lineWidths.push(lineWidth);
+    if (lineWidth > maxWidth) maxWidth = lineWidth;
+  }
+  const totalHeight = lines.length > 1 ? fontSize + (lines.length - 1) * lineHeight : fontSize;
   return {
-    width,
-    height: fontSize,
+    width: maxWidth,
+    height: totalHeight,
     glyphWidth,
     letterSpacing,
     spaceWidth,
-    strokeWidth
+    strokeWidth,
+    lineHeight,
+    lines,
+    lineWidths
   };
 }
 
@@ -434,6 +447,8 @@ function getTextStartPosition(alignment, layout) {
     x = 0;
   } else if (alignment === "top_right" || alignment === "bottom_right" || alignment === "center_right") {
     x = -totalWidth;
+  } else if (alignment === "top_center" || alignment === "bottom_center") {
+    x = -totalWidth / 2;
   }
   if (alignment === "center" || alignment === "center_left" || alignment === "center_right") {
     y = -totalHeight / 2;
@@ -444,26 +459,38 @@ function getTextStartPosition(alignment, layout) {
   }
   return { x, y };
 }
+function getLineStartX(params) {
+  const { alignment, lineWidth, maxWidth, strokeWidth } = params;
+  const totalLineWidth = lineWidth + strokeWidth;
+  const totalMaxWidth = maxWidth + strokeWidth;
+  if (alignment === "top_left" || alignment === "bottom_left" || alignment === "center_left") {
+    return 0;
+  }
+  if (alignment === "top_right" || alignment === "bottom_right" || alignment === "center_right") {
+    return totalMaxWidth - totalLineWidth;
+  }
+  return (totalMaxWidth - totalLineWidth) / 2;
+}
 
 // lib/drawer/shapes/text/text.ts
 var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
-function strokeAlphabetText(params) {
-  const { ctx, text, fontSize, startX, startY } = params;
-  const layout = getAlphabetLayout(text, fontSize);
-  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
+function strokeAlphabetLine(params) {
+  const { ctx, line, fontSize, startX, startY, layout } = params;
+  const { glyphWidth, letterSpacing, spaceWidth, strokeWidth } = layout;
+  const height = fontSize;
   const topY = startY;
-  const characters = Array.from(text);
+  const characters = Array.from(line);
   let cursor = startX + strokeWidth / 2;
   characters.forEach((char, index) => {
-    const lines = getGlyphLines(char);
+    const glyphLines = getGlyphLines(char);
     const advance = char === " " ? spaceWidth : glyphWidth;
-    if (lines?.length) {
+    if (glyphLines?.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;
+      for (const glyph of glyphLines) {
+        const x1 = cursor + glyph.x1 * glyphWidth;
+        const y1 = topY + (1 - glyph.y1) * height;
+        const x2 = cursor + glyph.x2 * glyphWidth;
+        const y2 = topY + (1 - glyph.y2) * height;
         ctx.moveTo(x1, y1);
         ctx.lineTo(x2, y2);
       }
@@ -475,6 +502,35 @@ function strokeAlphabetText(params) {
     }
   });
 }
+function strokeAlphabetText(params) {
+  const {
+    ctx,
+    text,
+    fontSize,
+    startX,
+    startY,
+    anchorAlignment = "center"
+  } = params;
+  const layout = getAlphabetLayout(text, fontSize);
+  const { lines, lineWidths, lineHeight, width, strokeWidth } = layout;
+  lines.forEach((line, lineIndex) => {
+    const lineStartX = startX + getLineStartX({
+      alignment: anchorAlignment,
+      lineWidth: lineWidths[lineIndex],
+      maxWidth: width,
+      strokeWidth
+    });
+    const lineStartY = startY + lineIndex * lineHeight;
+    strokeAlphabetLine({
+      ctx,
+      line,
+      fontSize,
+      startX: lineStartX,
+      startY: lineStartY,
+      layout
+    });
+  });
+}
 function drawText(params) {
   const {
     ctx,
@@ -502,12 +558,23 @@ function drawText(params) {
   ctx.lineCap = "round";
   ctx.lineJoin = "round";
   ctx.strokeStyle = color;
-  strokeAlphabetText({
-    ctx,
-    text,
-    fontSize: scaledFontSize,
-    startX: startPos.x,
-    startY: startPos.y
+  const { lines, lineWidths, lineHeight, width, strokeWidth } = layout;
+  lines.forEach((line, lineIndex) => {
+    const lineStartX = startPos.x + getLineStartX({
+      alignment: anchorAlignment,
+      lineWidth: lineWidths[lineIndex],
+      maxWidth: width,
+      strokeWidth
+    });
+    const lineStartY = startPos.y + lineIndex * lineHeight;
+    strokeAlphabetLine({
+      ctx,
+      line,
+      fontSize: scaledFontSize,
+      startX: lineStartX,
+      startY: lineStartY,
+      layout
+    });
   });
   ctx.restore();
 }
@@ -566,7 +633,8 @@ function drawPcbCopperText(params) {
     text: content,
     fontSize,
     startX: startPos.x,
-    startY: startPos.y
+    startY: startPos.y,
+    anchorAlignment: alignment
   });
   ctx.restore();
 }
@@ -1884,12 +1952,23 @@ function drawPcbSilkscreenText(params) {
   ctx.lineCap = "round";
   ctx.lineJoin = "round";
   ctx.strokeStyle = color;
-  strokeAlphabetText({
-    ctx,
-    text: content,
-    fontSize,
-    startX: startPos.x,
-    startY: startPos.y
+  const { lines, lineWidths, lineHeight, width, strokeWidth } = layout;
+  lines.forEach((line, lineIndex) => {
+    const lineStartX = startPos.x + getLineStartX({
+      alignment,
+      lineWidth: lineWidths[lineIndex],
+      maxWidth: width,
+      strokeWidth
+    });
+    const lineStartY = startPos.y + lineIndex * lineHeight;
+    strokeAlphabetLine({
+      ctx,
+      line,
+      fontSize,
+      startX: lineStartX,
+      startY: lineStartY,
+      layout
+    });
   });
   ctx.restore();
 }

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

@@ -83,6 +83,7 @@ export function drawPcbCopperText(params: DrawPcbCopperTextParams): void {
     fontSize,
     startX: startPos.x,
     startY: startPos.y,
+    anchorAlignment: alignment,
   })
   ctx.restore()
 }

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

@@ -4,8 +4,9 @@ import { applyToPoint } from "transformation-matrix"
 import type { PcbColorMap, CanvasContext } from "../types"
 import {
   getAlphabetLayout,
-  strokeAlphabetText,
   getTextStartPosition,
+  getLineStartX,
+  strokeAlphabetLine,
   type AnchorAlignment,
 } from "../shapes/text"
 
@@ -65,12 +66,27 @@ export function drawPcbSilkscreenText(
   ctx.lineJoin = "round"
   ctx.strokeStyle = color
 
-  strokeAlphabetText({
-    ctx,
-    text: content,
-    fontSize,
-    startX: startPos.x,
-    startY: startPos.y,
+  const { lines, lineWidths, lineHeight, width, strokeWidth } = layout
+
+  lines.forEach((line, lineIndex) => {
+    const lineStartX =
+      startPos.x +
+      getLineStartX({
+        alignment,
+        lineWidth: lineWidths[lineIndex]!,
+        maxWidth: width,
+        strokeWidth,
+      })
+    const lineStartY = startPos.y + lineIndex * lineHeight
+
+    strokeAlphabetLine({
+      ctx,
+      line,
+      fontSize,
+      startX: lineStartX,
+      startY: lineStartY,
+      layout,
+    })
   })
 
   ctx.restore()

package/lib/drawer/shapes/text/getAlphabetLayout.ts

@@ -2,6 +2,7 @@ export const GLYPH_WIDTH_RATIO = 0.62
 export const LETTER_SPACING_RATIO = 0.3 // Letter spacing between characters (25% of glyph width)
 export const SPACE_WIDTH_RATIO = 1
 export const STROKE_WIDTH_RATIO = 0.13
+export const LINE_HEIGHT_RATIO = 1.2 // Line height as a ratio of font size
 
 export type AlphabetLayout = {
   width: number
@@ -10,6 +11,9 @@ export type AlphabetLayout = {
   letterSpacing: number
   spaceWidth: number
   strokeWidth: number
+  lineHeight: number
+  lines: string[]
+  lineWidths: number[]
 }
 
 export function getAlphabetLayout(
@@ -19,23 +23,37 @@ export function getAlphabetLayout(
   const glyphWidth = fontSize * GLYPH_WIDTH_RATIO
   const letterSpacing = glyphWidth * LETTER_SPACING_RATIO
   const spaceWidth = glyphWidth * SPACE_WIDTH_RATIO
-  const characters = Array.from(text)
+  const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35)
+  const lineHeight = fontSize * LINE_HEIGHT_RATIO
 
-  let width = 0
-  characters.forEach((char, index) => {
-    const advance = char === " " ? spaceWidth : glyphWidth
-    width += advance
-    if (index < characters.length - 1) width += letterSpacing
-  })
+  const lines = text.split("\n")
+  const lineWidths: number[] = []
 
-  const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35)
+  let maxWidth = 0
+  for (const line of lines) {
+    const characters = Array.from(line)
+    let lineWidth = 0
+    characters.forEach((char, index) => {
+      const advance = char === " " ? spaceWidth : glyphWidth
+      lineWidth += advance
+      if (index < characters.length - 1) lineWidth += letterSpacing
+    })
+    lineWidths.push(lineWidth)
+    if (lineWidth > maxWidth) maxWidth = lineWidth
+  }
+
+  const totalHeight =
+    lines.length > 1 ? fontSize + (lines.length - 1) * lineHeight : fontSize
 
   return {
-    width,
-    height: fontSize,
+    width: maxWidth,
+    height: totalHeight,
     glyphWidth,
     letterSpacing,
     spaceWidth,
     strokeWidth,
+    lineHeight,
+    lines,
+    lineWidths,
   }
 }

package/lib/drawer/shapes/text/getTextStartPosition.ts

@@ -32,6 +32,8 @@ export function getTextStartPosition(
     alignment === "center_right"
   ) {
     x = -totalWidth
+  } else if (alignment === "top_center" || alignment === "bottom_center") {
+    x = -totalWidth / 2
   }
 
   // Vertical alignment
@@ -57,3 +59,37 @@ export function getTextStartPosition(
 
   return { x, y }
 }
+
+export interface GetLineStartXParams {
+  alignment: NinePointAnchor
+  lineWidth: number
+  maxWidth: number
+  strokeWidth: number
+}
+
+export function getLineStartX(params: GetLineStartXParams): number {
+  const { alignment, lineWidth, maxWidth, strokeWidth } = params
+  const totalLineWidth = lineWidth + strokeWidth
+  const totalMaxWidth = maxWidth + strokeWidth
+
+  // For left-aligned text, lines start at x=0 (relative to the start position)
+  if (
+    alignment === "top_left" ||
+    alignment === "bottom_left" ||
+    alignment === "center_left"
+  ) {
+    return 0
+  }
+
+  // For right-aligned text, lines end at the same position
+  if (
+    alignment === "top_right" ||
+    alignment === "bottom_right" ||
+    alignment === "center_right"
+  ) {
+    return totalMaxWidth - totalLineWidth
+  }
+
+  // For center-aligned text, center each line
+  return (totalMaxWidth - totalLineWidth) / 2
+}

package/lib/drawer/shapes/text/index.ts

@@ -1,3 +1,7 @@
 export * from "./text"
 export * from "./getAlphabetLayout"
-export * from "./getTextStartPosition"
+export {
+  getTextStartPosition,
+  getLineStartX,
+  type AnchorAlignment,
+} from "./getTextStartPosition"

package/lib/drawer/shapes/text/text.ts

@@ -4,7 +4,7 @@ import { applyToPoint } from "transformation-matrix"
 import type { CanvasContext } from "../../types"
 import type { NinePointAnchor } from "circuit-json"
 import { getAlphabetLayout, type AlphabetLayout } from "./getAlphabetLayout"
-import { getTextStartPosition } from "./getTextStartPosition"
+import { getTextStartPosition, getLineStartX } from "./getTextStartPosition"
 
 const getGlyphLines = (char: string) =>
   lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()]
@@ -15,29 +15,37 @@ export interface StrokeAlphabetTextParams {
   fontSize: number
   startX: number
   startY: number
+  anchorAlignment?: NinePointAnchor
 }
 
-export function strokeAlphabetText(params: StrokeAlphabetTextParams): void {
-  const { ctx, text, fontSize, startX, startY } = params
-  const layout = getAlphabetLayout(text, fontSize)
-  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout
+export interface StrokeAlphabetLineParams {
+  ctx: CanvasContext
+  line: string
+  fontSize: number
+  startX: number
+  startY: number
+  layout: AlphabetLayout
+}
+
+export function strokeAlphabetLine(params: StrokeAlphabetLineParams): void {
+  const { ctx, line, fontSize, startX, startY, layout } = params
+  const { glyphWidth, letterSpacing, spaceWidth, strokeWidth } = layout
+  const height = fontSize
   const topY = startY
-  const characters = Array.from(text)
+  const characters = Array.from(line)
   let cursor = startX + strokeWidth / 2
 
   characters.forEach((char, index) => {
-    const lines = getGlyphLines(char)
+    const glyphLines = getGlyphLines(char)
     const advance = char === " " ? spaceWidth : glyphWidth
 
-    if (lines?.length) {
+    if (glyphLines?.length) {
       ctx.beginPath()
-      for (const line of lines) {
-        // Convert normalized y coordinates to canvas coordinates (inverted for canvas)
-        // In normalized coords: y=0 is bottom, y=1 is top
-        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
+      for (const glyph of glyphLines) {
+        const x1 = cursor + glyph.x1 * glyphWidth
+        const y1 = topY + (1 - glyph.y1) * height
+        const x2 = cursor + glyph.x2 * glyphWidth
+        const y2 = topY + (1 - glyph.y2) * height
         ctx.moveTo(x1, y1)
         ctx.lineTo(x2, y2)
       }
@@ -51,6 +59,40 @@ export function strokeAlphabetText(params: StrokeAlphabetTextParams): void {
   })
 }
 
+export function strokeAlphabetText(params: StrokeAlphabetTextParams): void {
+  const {
+    ctx,
+    text,
+    fontSize,
+    startX,
+    startY,
+    anchorAlignment = "center",
+  } = params
+  const layout = getAlphabetLayout(text, fontSize)
+  const { lines, lineWidths, lineHeight, width, strokeWidth } = layout
+
+  lines.forEach((line, lineIndex) => {
+    const lineStartX =
+      startX +
+      getLineStartX({
+        alignment: anchorAlignment,
+        lineWidth: lineWidths[lineIndex]!,
+        maxWidth: width,
+        strokeWidth,
+      })
+    const lineStartY = startY + lineIndex * lineHeight
+
+    strokeAlphabetLine({
+      ctx,
+      line,
+      fontSize,
+      startX: lineStartX,
+      startY: lineStartY,
+      layout,
+    })
+  })
+}
+
 export interface DrawTextParams {
   ctx: CanvasContext
   text: string
@@ -96,12 +138,27 @@ export function drawText(params: DrawTextParams): void {
   ctx.lineJoin = "round"
   ctx.strokeStyle = color
 
-  strokeAlphabetText({
-    ctx,
-    text,
-    fontSize: scaledFontSize,
-    startX: startPos.x,
-    startY: startPos.y,
+  const { lines, lineWidths, lineHeight, width, strokeWidth } = layout
+
+  lines.forEach((line, lineIndex) => {
+    const lineStartX =
+      startPos.x +
+      getLineStartX({
+        alignment: anchorAlignment,
+        lineWidth: lineWidths[lineIndex]!,
+        maxWidth: width,
+        strokeWidth,
+      })
+    const lineStartY = startPos.y + lineIndex * lineHeight
+
+    strokeAlphabetLine({
+      ctx,
+      line,
+      fontSize: scaledFontSize,
+      startX: lineStartX,
+      startY: lineStartY,
+      layout,
+    })
   })
 
   ctx.restore()

package/package.json

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

package/tests/elements/pcb-copper-text-multiline-left.test.ts

@@ -0,0 +1,33 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbCopperText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw multiline copper text with left alignment", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(150 * SCALE, 100 * SCALE)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(SCALE, SCALE)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width / SCALE, canvas.height / SCALE)
+
+  const text: PcbCopperText = {
+    type: "pcb_copper_text",
+    pcb_copper_text_id: "copper-text-1",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "SHORT\nLONGERTEXT\nMED",
+    anchor_position: { x: 20, y: 50 },
+    anchor_alignment: "center_left",
+    font: "tscircuit2024",
+    font_size: 6,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-copper-text-multiline-right.test.ts

@@ -0,0 +1,33 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbCopperText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw multiline copper text with right alignment", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(150 * SCALE, 100 * SCALE)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(SCALE, SCALE)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width / SCALE, canvas.height / SCALE)
+
+  const text: PcbCopperText = {
+    type: "pcb_copper_text",
+    pcb_copper_text_id: "copper-text-1",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "SHORT\nLONGERTEXT\nMED",
+    anchor_position: { x: 130, y: 50 },
+    anchor_alignment: "center_right",
+    font: "tscircuit2024",
+    font_size: 6,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-copper-text-multiline.test.ts

@@ -0,0 +1,33 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbCopperText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw multiline copper text with center alignment", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(150 * SCALE, 100 * SCALE)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(SCALE, SCALE)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width / SCALE, canvas.height / SCALE)
+
+  const text: PcbCopperText = {
+    type: "pcb_copper_text",
+    pcb_copper_text_id: "copper-text-1",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "LINE1\nLONGERLINE2\nL3",
+    anchor_position: { x: 75, y: 50 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 6,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,31 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen text with multiple lines", async () => {
+  const canvas = createCanvas(200, 200)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 200, 200)
+
+  const text: PcbSilkscreenText = {
+    type: "pcb_silkscreen_text",
+    pcb_silkscreen_text_id: "text1",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "TOP\nMIDDLE\nBOTTOM",
+    anchor_position: { x: 100, y: 100 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 10,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})