circuit-to-canvas 0.0.4 → 0.0.6

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyCircuitElement, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbFabricationNotePath } from 'circuit-json';
+import { AnyCircuitElement, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath } from 'circuit-json';
 import { Matrix } from 'transformation-matrix';
 
 /**
@@ -210,6 +210,8 @@ type AlphabetLayout = {
     letterSpacing: number;
     spaceWidth: number;
     strokeWidth: number;
+    baselineOffset: number;
+    descenderDepth: number;
 };
 declare function getAlphabetLayout(text: string, fontSize: number): AlphabetLayout;
 type AnchorAlignment = "center" | "top_left" | "top_right" | "bottom_left" | "bottom_right" | "left" | "right" | "top" | "bottom";
@@ -355,6 +357,14 @@ interface DrawPcbFabricationNoteRectParams {
 }
 declare function drawPcbFabricationNoteRect(params: DrawPcbFabricationNoteRectParams): void;
 
+interface DrawPcbNoteRectParams {
+    ctx: CanvasContext;
+    rect: PcbNoteRect;
+    transform: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbNoteRect(params: DrawPcbNoteRectParams): void;
+
 interface DrawPcbFabricationNotePathParams {
     ctx: CanvasContext;
     path: PcbFabricationNotePath;
@@ -363,4 +373,4 @@ interface DrawPcbFabricationNotePathParams {
 }
 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 };
+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 DrawPcbNoteRectParams, 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, drawPcbNoteRect, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenPath, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };

package/dist/index.js

@@ -821,6 +821,16 @@ 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"]);
+var LOWERCASE_BASELINE_OFFSET = (() => {
+  const referenceLetters = ["a", "c", "e", "m", "n", "o", "r", "s", "u", "x"];
+  const offsets = referenceLetters.map((letter) => lineAlphabet[letter]).filter(
+    (lines) => lines !== void 0 && lines.length > 0
+  ).map(
+    (lines) => Math.min(...lines.map((line) => Math.min(line.y1, line.y2)))
+  );
+  return offsets.length > 0 ? Math.min(...offsets) : 0;
+})();
+var getBaselineOffsetForLetter = (letter) => letter >= "a" && letter <= "z" ? LOWERCASE_BASELINE_OFFSET : 0;
 function getAlphabetLayout(text, fontSize) {
   const glyphWidth = fontSize * GLYPH_WIDTH_RATIO;
   const letterSpacing = glyphWidth * LETTER_SPACING_RATIO;
@@ -833,19 +843,24 @@ function getAlphabetLayout(text, fontSize) {
     if (index < characters.length - 1) width += letterSpacing;
   });
   const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35);
+  const hasLowercase = /[a-z]/.test(text);
+  const baselineOffset = hasLowercase ? (1 - LOWERCASE_BASELINE_OFFSET) * fontSize : fontSize;
+  const descenderDepth = hasLowercase ? LOWERCASE_BASELINE_OFFSET * fontSize : 0;
   return {
     width,
     height: fontSize,
     glyphWidth,
     letterSpacing,
     spaceWidth,
-    strokeWidth
+    strokeWidth,
+    baselineOffset,
+    descenderDepth
   };
 }
 var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
 function getTextStartPosition(alignment, layout) {
   const totalWidth = layout.width + layout.strokeWidth;
-  const totalHeight = layout.height + layout.strokeWidth;
+  const totalHeight = layout.height + layout.descenderDepth + layout.strokeWidth;
   let x = 0;
   let y = 0;
   if (alignment === "center") {
@@ -856,26 +871,38 @@ function getTextStartPosition(alignment, layout) {
     x = -totalWidth;
   }
   if (alignment === "center") {
-    y = -totalHeight / 2;
+    y = layout.baselineOffset - layout.height / 2;
   } else if (alignment === "top_left" || alignment === "top_right" || alignment === "top") {
-    y = 0;
+    y = layout.baselineOffset;
   } else if (alignment === "bottom_left" || alignment === "bottom_right" || alignment === "bottom") {
-    y = -totalHeight;
+    y = -layout.descenderDepth;
+  } else {
+    y = 0;
   }
   return { x, y };
 }
 function strokeAlphabetText(ctx, text, layout, startX, startY) {
-  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
-  const yOffset = startY + height / 2;
+  const {
+    glyphWidth,
+    letterSpacing,
+    spaceWidth,
+    height,
+    strokeWidth,
+    baselineOffset
+  } = layout;
+  const baselineY = startY;
   const characters = Array.from(text);
   let cursor = startX + strokeWidth / 2;
   characters.forEach((char, index) => {
     const lines = getGlyphLines(char);
     const advance = char === " " ? spaceWidth : glyphWidth;
+    const charBaselineOffset = getBaselineOffsetForLetter(char);
     if (CURVED_GLYPHS.has(char)) {
+      const normalizedCenterY = 0.5;
+      const adjustedCenterY = normalizedCenterY - charBaselineOffset;
+      const centerY = baselineY - adjustedCenterY * height;
       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,
@@ -890,10 +917,12 @@ function strokeAlphabetText(ctx, text, layout, startX, startY) {
     } else if (lines?.length) {
       ctx.beginPath();
       for (const line of lines) {
+        const adjusted_y1 = line.y1 - charBaselineOffset;
+        const adjusted_y2 = line.y2 - charBaselineOffset;
         const x1 = cursor + line.x1 * glyphWidth;
-        const y1 = yOffset - line.y1 * height;
+        const y1 = baselineY - adjusted_y1 * height;
         const x2 = cursor + line.x2 * glyphWidth;
-        const y2 = yOffset - line.y2 * height;
+        const y2 = baselineY - adjusted_y2 * height;
         ctx.moveTo(x1, y1);
         ctx.lineTo(x2, y2);
       }
@@ -932,13 +961,7 @@ function drawText(params) {
   ctx.lineCap = "round";
   ctx.lineJoin = "round";
   ctx.strokeStyle = color;
-  strokeAlphabetText(
-    ctx,
-    text,
-    layout,
-    startPos.x,
-    startPos.y + layout.strokeWidth / 2
-  );
+  strokeAlphabetText(ctx, text, layout, startPos.x, startPos.y);
   ctx.restore();
 }
 
@@ -971,11 +994,10 @@ function drawPcbCopperText(params) {
   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;
+  const startY = startPos.y;
   ctx.save();
   ctx.translate(x, y);
   if (text.is_mirrored) ctx.scale(-1, 1);
@@ -988,10 +1010,13 @@ function drawPcbCopperText(params) {
     const paddingRight = padding.right * scale2;
     const paddingTop = padding.top * scale2;
     const paddingBottom = padding.bottom * scale2;
+    const textBoxTop = startY - layout.baselineOffset - layout.strokeWidth / 2;
+    const textBoxBottom = startY + layout.descenderDepth + layout.strokeWidth / 2;
+    const textBoxHeight = textBoxBottom - textBoxTop;
     const xOffset = startX - paddingLeft;
-    const yOffset = -(layout.height / 2) - layout.strokeWidth / 2 - paddingTop;
+    const yOffset = textBoxTop - paddingTop;
     const knockoutWidth = totalWidth + paddingLeft + paddingRight;
-    const knockoutHeight = totalHeight + paddingTop + paddingBottom;
+    const knockoutHeight = textBoxHeight + paddingTop + paddingBottom;
     ctx.fillStyle = textColor;
     ctx.fillRect(xOffset, yOffset, knockoutWidth, knockoutHeight);
     const previousCompositeOperation = ctx.globalCompositeOperation;
@@ -1055,6 +1080,28 @@ function drawPcbFabricationNoteRect(params) {
   });
 }
 
+// lib/drawer/elements/pcb-note-rect.ts
+function drawPcbNoteRect(params) {
+  const { ctx, rect, transform, colorMap } = params;
+  const defaultColor = "rgb(89, 148, 220)";
+  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;
@@ -1273,6 +1320,14 @@ var CircuitToCanvasDrawer = class {
         colorMap: this.colorMap
       });
     }
+    if (element.type === "pcb_note_rect") {
+      drawPcbNoteRect({
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+        ctx: this.ctx,
+        rect: element
+      });
+    }
     if (element.type === "pcb_fabrication_note_path") {
       drawPcbFabricationNotePath({
         ctx: this.ctx,
@@ -1298,6 +1353,7 @@ export {
   drawPcbFabricationNoteRect,
   drawPcbFabricationNoteText,
   drawPcbHole,
+  drawPcbNoteRect,
   drawPcbPlatedHole,
   drawPcbSilkscreenCircle,
   drawPcbSilkscreenLine,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -16,6 +16,7 @@ import type {
   PcbCopperText,
   PcbFabricationNoteText,
   PcbFabricationNoteRect,
+  PcbNoteRect,
   PcbFabricationNotePath,
 } from "circuit-json"
 import { identity, compose, translate, scale } from "transformation-matrix"
@@ -45,6 +46,7 @@ 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 { drawPcbNoteRect } from "./elements/pcb-note-rect"
 import { drawPcbFabricationNotePath } from "./elements/pcb-fabrication-note-path"
 
 export interface DrawElementsOptions {
@@ -288,6 +290,15 @@ export class CircuitToCanvasDrawer {
       })
     }
 
+    if (element.type === "pcb_note_rect") {
+      drawPcbNoteRect({
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+        ctx: this.ctx,
+        rect: element as PcbNoteRect,
+      })
+    }
+
     if (element.type === "pcb_fabrication_note_path") {
       drawPcbFabricationNotePath({
         ctx: this.ctx,

package/lib/drawer/elements/index.ts

@@ -48,6 +48,11 @@ export {
   type DrawPcbFabricationNoteRectParams,
 } from "./pcb-fabrication-note-rect"
 
+export {
+  drawPcbNoteRect,
+  type DrawPcbNoteRectParams,
+} from "./pcb-note-rect"
+
 export {
   drawPcbFabricationNotePath,
   type DrawPcbFabricationNotePathParams,

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

@@ -52,12 +52,10 @@ export function drawPcbCopperText(params: DrawPcbCopperTextParams): void {
   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)
+  const startY = startPos.y
 
   ctx.save()
   ctx.translate(x, y)
@@ -73,10 +71,17 @@ export function drawPcbCopperText(params: DrawPcbCopperTextParams): void {
     const paddingRight = padding.right * scale
     const paddingTop = padding.top * scale
     const paddingBottom = padding.bottom * scale
+    // Calculate knockout rectangle to cover the text box
+    // startY is the baseline position, text box extends from (baseline - baselineOffset) to (baseline + descenderDepth)
+    const textBoxTop = startY - layout.baselineOffset - layout.strokeWidth / 2
+    const textBoxBottom =
+      startY + layout.descenderDepth + layout.strokeWidth / 2
+    const textBoxHeight = textBoxBottom - textBoxTop
+
     const xOffset = startX - paddingLeft
-    const yOffset = -(layout.height / 2) - layout.strokeWidth / 2 - paddingTop
+    const yOffset = textBoxTop - paddingTop
     const knockoutWidth = totalWidth + paddingLeft + paddingRight
-    const knockoutHeight = totalHeight + paddingTop + paddingBottom
+    const knockoutHeight = textBoxHeight + paddingTop + paddingBottom
 
     ctx.fillStyle = textColor
     ctx.fillRect(xOffset, yOffset, knockoutWidth, knockoutHeight)

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

@@ -0,0 +1,37 @@
+import type { PcbNoteRect } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawRect } from "../shapes/rect"
+
+export interface DrawPcbNoteRectParams {
+  ctx: CanvasContext
+  rect: PcbNoteRect
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export function drawPcbNoteRect(params: DrawPcbNoteRectParams): void {
+  const { ctx, rect, transform, colorMap } = params
+
+  // Use the color from the rect if provided, otherwise use a default color
+  // Notes are typically shown in a distinct color
+  const defaultColor = "rgb(89, 148, 220)" // White color for notes
+  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 : undefined,
+    stroke: hasStroke ? color : undefined,
+    strokeWidth: hasStroke ? rect.stroke_width : undefined,
+    borderRadius: rect.corner_radius,
+    transform,
+    isStrokeDashed,
+  })
+}

package/lib/drawer/shapes/text.ts

@@ -9,6 +9,25 @@ const SPACE_WIDTH_RATIO = 1
 const STROKE_WIDTH_RATIO = 0.13
 const CURVED_GLYPHS = new Set(["O", "o", "0"])
 
+// Calculate baseline offset from reference lowercase letters (same as working implementation)
+const LOWERCASE_BASELINE_OFFSET = (() => {
+  const referenceLetters = ["a", "c", "e", "m", "n", "o", "r", "s", "u", "x"]
+  const offsets = referenceLetters
+    .map((letter) => lineAlphabet[letter])
+    .filter(
+      (lines): lines is NonNullable<typeof lines> =>
+        lines !== undefined && lines.length > 0,
+    )
+    .map((lines) =>
+      Math.min(...lines.map((line) => Math.min(line.y1, line.y2))),
+    )
+  return offsets.length > 0 ? Math.min(...offsets) : 0
+})()
+
+// Get baseline offset for a specific letter (only lowercase letters get offset)
+const getBaselineOffsetForLetter = (letter: string) =>
+  letter >= "a" && letter <= "z" ? LOWERCASE_BASELINE_OFFSET : 0
+
 export type AlphabetLayout = {
   width: number
   height: number
@@ -16,6 +35,8 @@ export type AlphabetLayout = {
   letterSpacing: number
   spaceWidth: number
   strokeWidth: number
+  baselineOffset: number // Distance from top to baseline
+  descenderDepth: number // Distance from baseline to bottom (for descenders)
 }
 
 export function getAlphabetLayout(
@@ -35,6 +56,15 @@ export function getAlphabetLayout(
   })
 
   const strokeWidth = Math.max(fontSize * STROKE_WIDTH_RATIO, 0.35)
+  // Calculate baseline offset: distance from top of text box to baseline
+  // In normalized coords: y=0 is bottom, y=1 is top
+  // LOWERCASE_BASELINE_OFFSET is the minimum y (baseline position) in normalized coords
+  const hasLowercase = /[a-z]/.test(text)
+  const baselineOffset = hasLowercase
+    ? (1 - LOWERCASE_BASELINE_OFFSET) * fontSize
+    : fontSize
+  // Descender depth: distance from baseline to bottom (for descenders like g, j, p, q, y)
+  const descenderDepth = hasLowercase ? LOWERCASE_BASELINE_OFFSET * fontSize : 0
 
   return {
     width,
@@ -43,6 +73,8 @@ export function getAlphabetLayout(
     letterSpacing,
     spaceWidth,
     strokeWidth,
+    baselineOffset,
+    descenderDepth,
   }
 }
 
@@ -65,7 +97,8 @@ export function getTextStartPosition(
   layout: AlphabetLayout,
 ): { x: number; y: number } {
   const totalWidth = layout.width + layout.strokeWidth
-  const totalHeight = layout.height + layout.strokeWidth
+  // Total height includes descender depth for proper vertical alignment
+  const totalHeight = layout.height + layout.descenderDepth + layout.strokeWidth
 
   let x = 0
   let y = 0
@@ -87,21 +120,24 @@ export function getTextStartPosition(
     x = -totalWidth
   }
 
-  // Vertical alignment
+  // Vertical alignment - positions relative to baseline
+  // Text extends from (baseline - baselineOffset) at top to (baseline + descenderDepth) at bottom
   if (alignment === "center") {
-    y = -totalHeight / 2
+    y = layout.baselineOffset - layout.height / 2
   } else if (
     alignment === "top_left" ||
     alignment === "top_right" ||
     alignment === "top"
   ) {
-    y = 0
+    y = layout.baselineOffset
   } else if (
     alignment === "bottom_left" ||
     alignment === "bottom_right" ||
     alignment === "bottom"
   ) {
-    y = -totalHeight
+    y = -layout.descenderDepth
+  } else {
+    y = 0
   }
 
   return { x, y }
@@ -114,19 +150,31 @@ export function strokeAlphabetText(
   startX: number,
   startY: number,
 ): void {
-  const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout
-  const yOffset = startY + height / 2
+  const {
+    glyphWidth,
+    letterSpacing,
+    spaceWidth,
+    height,
+    strokeWidth,
+    baselineOffset,
+  } = layout
+  const baselineY = startY
   const characters = Array.from(text)
   let cursor = startX + strokeWidth / 2
 
   characters.forEach((char, index) => {
     const lines = getGlyphLines(char)
     const advance = char === " " ? spaceWidth : glyphWidth
+    // Get normalized baseline offset for this specific character (0-1 range)
+    const charBaselineOffset = getBaselineOffsetForLetter(char)
 
     if (CURVED_GLYPHS.has(char)) {
+      // For curved glyphs, adjust coordinates by baseline offset
+      const normalizedCenterY = 0.5
+      const adjustedCenterY = normalizedCenterY - charBaselineOffset
+      const centerY = baselineY - adjustedCenterY * height
       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,
@@ -141,20 +189,20 @@ export function strokeAlphabetText(
     } else if (lines?.length) {
       ctx.beginPath()
       for (const line of lines) {
+        // Convert normalized y coordinates to canvas coordinates (inverted for canvas)
+        const adjusted_y1 = line.y1 - charBaselineOffset
+        const adjusted_y2 = line.y2 - charBaselineOffset
         const x1 = cursor + line.x1 * glyphWidth
-        const y1 = yOffset - line.y1 * height
+        const y1 = baselineY - adjusted_y1 * height
         const x2 = cursor + line.x2 * glyphWidth
-        const y2 = yOffset - line.y2 * height
+        const y2 = baselineY - adjusted_y2 * height
         ctx.moveTo(x1, y1)
         ctx.lineTo(x2, y2)
       }
       ctx.stroke()
     }
 
-    // Move cursor by the character width
     cursor += advance
-    // Add letter spacing after each character except the last one
-    // This spacing will be before the next character, creating visible gaps
     if (index < characters.length - 1) {
       cursor += letterSpacing
     }
@@ -206,13 +254,7 @@ export function drawText(params: DrawTextParams): void {
   ctx.lineJoin = "round"
   ctx.strokeStyle = color
 
-  strokeAlphabetText(
-    ctx,
-    text,
-    layout,
-    startPos.x,
-    startPos.y + layout.strokeWidth / 2,
-  )
+  strokeAlphabetText(ctx, text, 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.4",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",

package/tests/elements/pcb-fabrication-note-text-baseline-anchors.test.ts

@@ -0,0 +1,80 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNoteText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw text baseline alignment with different anchor positions", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(300 * SCALE, 200 * 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)
+
+  // Draw reference lines
+  ctx.strokeStyle = "#444444"
+  ctx.lineWidth = 0.5
+  // Top line
+  ctx.beginPath()
+  ctx.moveTo(10, 50)
+  ctx.lineTo(290, 50)
+  ctx.stroke()
+  // Center/baseline line
+  ctx.beginPath()
+  ctx.moveTo(10, 100)
+  ctx.lineTo(290, 100)
+  ctx.stroke()
+  // Bottom line
+  ctx.beginPath()
+  ctx.moveTo(10, 150)
+  ctx.lineTo(290, 150)
+  ctx.stroke()
+
+  // Test with top alignment
+  const textTop: PcbFabricationNoteText = {
+    type: "pcb_fabrication_note_text",
+    pcb_fabrication_note_text_id: "fab-note-top",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "gap",
+    anchor_position: { x: 50, y: 50 },
+    anchor_alignment: "top_left",
+    font: "tscircuit2024",
+    font_size: 16,
+  }
+
+  // Test with center alignment (baseline at center)
+  const textCenter: PcbFabricationNoteText = {
+    type: "pcb_fabrication_note_text",
+    pcb_fabrication_note_text_id: "fab-note-center",
+    pcb_component_id: "component2",
+    layer: "top",
+    text: "gap",
+    anchor_position: { x: 150, y: 100 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 16,
+  }
+
+  // Test with bottom alignment
+  const textBottom: PcbFabricationNoteText = {
+    type: "pcb_fabrication_note_text",
+    pcb_fabrication_note_text_id: "fab-note-bottom",
+    pcb_component_id: "component3",
+    layer: "top",
+    text: "gap",
+    anchor_position: { x: 250, y: 150 },
+    anchor_alignment: "bottom_left",
+    font: "tscircuit2024",
+    font_size: 16,
+  }
+
+  drawer.drawElements([textTop, textCenter, textBottom])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "fabrication-note-text-baseline-anchors",
+  )
+})

package/tests/elements/pcb-fabrication-note-text-baseline.test.ts

@@ -0,0 +1,43 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNoteText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw text with baseline alignment and descenders", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(200 * SCALE, 150 * 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)
+
+  // Draw baseline reference line
+  ctx.strokeStyle = "#444444"
+  ctx.lineWidth = 0.5
+  ctx.beginPath()
+  ctx.moveTo(10, 75)
+  ctx.lineTo(190, 75)
+  ctx.stroke()
+
+  // Test text with lowercase letters and descenders (g, j, p, q, y)
+  const text: PcbFabricationNoteText = {
+    type: "pcb_fabrication_note_text",
+    pcb_fabrication_note_text_id: "fab-note-baseline",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "gap jqpy",
+    anchor_position: { x: 100, y: 75 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 20,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "fabrication-note-text-baseline",
+  )
+})

package/tests/elements/pcb-fabrication-note-text-descenders.test.ts

@@ -0,0 +1,43 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNoteText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw lowercase text with descenders", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(250 * 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)
+
+  // Draw baseline reference line
+  ctx.strokeStyle = "#666666"
+  ctx.lineWidth = 0.5
+  ctx.beginPath()
+  ctx.moveTo(10, 50)
+  ctx.lineTo(240, 50)
+  ctx.stroke()
+
+  // Test all descender letters: g, j, p, q, y
+  const text: PcbFabricationNoteText = {
+    type: "pcb_fabrication_note_text",
+    pcb_fabrication_note_text_id: "fab-note-descenders",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "gjpqy",
+    anchor_position: { x: 125, y: 50 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 24,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "fabrication-note-text-descenders",
+  )
+})

package/tests/elements/pcb-fabrication-note-text-small.test.ts

@@ -18,7 +18,7 @@ test("draw fabrication note text small size", async () => {
     pcb_fabrication_note_text_id: "fab-note-small",
     pcb_component_id: "component1",
     layer: "top",
-    text: "SMAL",
+    text: "Smapq876",
     anchor_position: { x: 50, y: 50 },
     anchor_alignment: "center",
     font: "tscircuit2024",

package/tests/elements/pcb-note-rect-all-features.test.ts

@@ -0,0 +1,38 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbNoteRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note rect with all features", 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 rect: PcbNoteRect = {
+    type: "pcb_note_rect",
+    pcb_note_rect_id: "note_rect1",
+    pcb_component_id: "component1",
+    pcb_group_id: "group1",
+    subcircuit_id: "subcircuit1",
+    name: "Test Note",
+    text: "This is a test note",
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    stroke_width: 2,
+    corner_radius: 5,
+    is_filled: true,
+    has_stroke: true,
+    is_stroke_dashed: true,
+    color: "#00FFFF", // Cyan color
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-note-rect-dashed-stroke.test.ts

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbNoteRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note rect with dashed stroke and no fill", 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 rect: PcbNoteRect = {
+    type: "pcb_note_rect",
+    pcb_note_rect_id: "note_rect2",
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    stroke_width: 2,
+    is_filled: false,
+    has_stroke: true,
+    is_stroke_dashed: true,
+    color: "#0000FF", // Blue color
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-note-rect-filled-no-stroke.test.ts

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbNoteRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note rect with fill and no stroke", 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 rect: PcbNoteRect = {
+    type: "pcb_note_rect",
+    pcb_note_rect_id: "note_rect3",
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    stroke_width: 2,
+    corner_radius: 8,
+    is_filled: true,
+    has_stroke: false,
+    is_stroke_dashed: false,
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})