circuit-to-canvas 0.0.29 → 0.0.31

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -1,10 +1,10 @@
 import type {
   AnyCircuitElement,
   PcbPlatedHole,
-  PCBVia,
-  PCBHole,
+  PcbVia,
+  PcbHole,
   PcbSmtPad,
-  PCBTrace,
+  PcbTrace,
   PcbBoard,
   PcbSilkscreenText,
   PcbSilkscreenRect,
@@ -23,8 +23,16 @@ import type {
   PcbNoteText,
   PcbNoteDimension,
   PcbNoteLine,
+  PcbRenderLayer,
 } from "circuit-json"
-import { identity, compose, translate, scale } from "transformation-matrix"
+import {
+  identity,
+  compose,
+  translate,
+  scale,
+  applyToPoint,
+} from "transformation-matrix"
+import { shouldDrawElement } from "./pcb-render-layer-filter"
 import type { Matrix } from "transformation-matrix"
 import {
   type CanvasContext,
@@ -39,6 +47,8 @@ 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 { drawPath } from "./shapes/path"
+import { drawRect } from "./shapes/rect"
 import { drawPcbSilkscreenText } from "./elements/pcb-silkscreen-text"
 import { drawPcbSilkscreenRect } from "./elements/pcb-silkscreen-rect"
 import { drawPcbSilkscreenCircle } from "./elements/pcb-silkscreen-circle"
@@ -58,7 +68,7 @@ import { drawPcbNoteDimension } from "./elements/pcb-note-dimension"
 import { drawPcbNoteLine } from "./elements/pcb-note-line"
 
 export interface DrawElementsOptions {
-  layers?: string[]
+  layers?: PcbRenderLayer[]
 }
 
 interface CanvasLike {
@@ -146,8 +156,103 @@ export class CircuitToCanvasDrawer {
     elements: AnyCircuitElement[],
     options: DrawElementsOptions = {},
   ): void {
+    // Check if any pad has is_covered_with_solder_mask: true
+    const hasSoldermaskPads = elements.some(
+      (el) =>
+        el.type === "pcb_smtpad" &&
+        (el as PcbSmtPad).is_covered_with_solder_mask === true,
+    )
+
     for (const element of elements) {
-      this.drawElement(element, options)
+      if (element.type === "pcb_board" && hasSoldermaskPads) {
+        // Draw board with soldermask fill when pads have soldermask
+        this.drawBoardWithSoldermask(element as PcbBoard)
+      } else {
+        this.drawElement(element, options)
+      }
+    }
+  }
+
+  private drawBoardWithSoldermask(board: PcbBoard): void {
+    const { width, height, center, outline } = board
+    const layer = "top" // Default to top layer for soldermask color
+
+    // If the board has a custom outline, draw it as a path with soldermask fill
+    if (outline && Array.isArray(outline) && outline.length >= 3) {
+      const soldermaskColor =
+        this.colorMap.soldermask[
+          layer as keyof typeof this.colorMap.soldermask
+        ] ?? this.colorMap.soldermask.top
+
+      // Draw filled path
+      const canvasPoints = outline.map((p) => {
+        const [x, y] = applyToPoint(this.realToCanvasMat, [p.x, p.y])
+        return { x, y }
+      })
+
+      this.ctx.beginPath()
+      const firstPoint = canvasPoints[0]
+      if (firstPoint) {
+        this.ctx.moveTo(firstPoint.x, firstPoint.y)
+        for (let i = 1; i < canvasPoints.length; i++) {
+          const point = canvasPoints[i]
+          if (point) {
+            this.ctx.lineTo(point.x, point.y)
+          }
+        }
+        this.ctx.closePath()
+      }
+
+      this.ctx.fillStyle = soldermaskColor
+      this.ctx.fill()
+
+      // Draw outline stroke
+      drawPath({
+        ctx: this.ctx,
+        points: outline.map((p) => ({ x: p.x, y: p.y })),
+        stroke: this.colorMap.boardOutline,
+        strokeWidth: 0.1,
+        realToCanvasMat: this.realToCanvasMat,
+        closePath: true,
+      })
+      return
+    }
+
+    // Otherwise draw a rectangle with soldermask fill
+    if (width !== undefined && height !== undefined && center) {
+      const soldermaskColor =
+        this.colorMap.soldermask[
+          layer as keyof typeof this.colorMap.soldermask
+        ] ?? this.colorMap.soldermask.top
+
+      // Draw filled rectangle
+      drawRect({
+        ctx: this.ctx,
+        center,
+        width,
+        height,
+        fill: soldermaskColor,
+        realToCanvasMat: this.realToCanvasMat,
+      })
+
+      // Draw the outline stroke separately using path
+      const halfWidth = width / 2
+      const halfHeight = height / 2
+      const corners = [
+        { x: center.x - halfWidth, y: center.y - halfHeight },
+        { x: center.x + halfWidth, y: center.y - halfHeight },
+        { x: center.x + halfWidth, y: center.y + halfHeight },
+        { x: center.x - halfWidth, y: center.y + halfHeight },
+      ]
+
+      drawPath({
+        ctx: this.ctx,
+        points: corners,
+        stroke: this.colorMap.boardOutline,
+        strokeWidth: 0.1,
+        realToCanvasMat: this.realToCanvasMat,
+        closePath: true,
+      })
     }
   }
 
@@ -155,6 +260,11 @@ export class CircuitToCanvasDrawer {
     element: AnyCircuitElement,
     options: DrawElementsOptions,
   ): void {
+    // Check if element should be drawn based on layer options
+    if (!shouldDrawElement(element, options)) {
+      return
+    }
+
     if (element.type === "pcb_plated_hole") {
       drawPcbPlatedHole({
         ctx: this.ctx,
@@ -167,7 +277,7 @@ export class CircuitToCanvasDrawer {
     if (element.type === "pcb_via") {
       drawPcbVia({
         ctx: this.ctx,
-        via: element as PCBVia,
+        via: element as PcbVia,
         realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap,
       })
@@ -176,7 +286,7 @@ export class CircuitToCanvasDrawer {
     if (element.type === "pcb_hole") {
       drawPcbHole({
         ctx: this.ctx,
-        hole: element as PCBHole,
+        hole: element as PcbHole,
         realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap,
       })
@@ -194,7 +304,7 @@ export class CircuitToCanvasDrawer {
     if (element.type === "pcb_trace") {
       drawPcbTrace({
         ctx: this.ctx,
-        trace: element as PCBTrace,
+        trace: element as PcbTrace,
         realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap,
       })

package/lib/drawer/elements/index.ts

@@ -8,6 +8,11 @@ export { drawPcbVia, type DrawPcbViaParams } from "./pcb-via"
 export { drawPcbHole, type DrawPcbHoleParams } from "./pcb-hole"
 
 export { drawPcbSmtPad, type DrawPcbSmtPadParams } from "./pcb-smtpad"
+export {
+  drawSoldermaskRingForRect,
+  drawSoldermaskRingForCircle,
+  drawSoldermaskRingForPill,
+} from "./soldermask-margin"
 
 export { drawPcbTrace, type DrawPcbTraceParams } from "./pcb-trace"
 

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

@@ -5,6 +5,11 @@ import { drawCircle } from "../shapes/circle"
 import { drawRect } from "../shapes/rect"
 import { drawPill } from "../shapes/pill"
 import { drawPolygon } from "../shapes/polygon"
+import {
+  drawSoldermaskRingForRect,
+  drawSoldermaskRingForCircle,
+  drawSoldermaskRingForPill,
+} from "./soldermask-margin"
 
 export interface DrawPcbSmtPadParams {
   ctx: CanvasContext
@@ -20,12 +25,45 @@ function layerToColor(layer: string, colorMap: PcbColorMap): string {
   )
 }
 
+function getSoldermaskColor(layer: string, colorMap: PcbColorMap): string {
+  return (
+    colorMap.soldermaskOverCopper[
+      layer as keyof typeof colorMap.soldermaskOverCopper
+    ] ?? colorMap.soldermaskOverCopper.top
+  )
+}
+
 export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
   const { ctx, pad, realToCanvasMat, colorMap } = params
 
   const color = layerToColor(pad.layer, colorMap)
+  const hasSoldermask =
+    pad.is_covered_with_solder_mask === true &&
+    pad.soldermask_margin !== undefined &&
+    pad.soldermask_margin !== 0
+  const margin = hasSoldermask ? pad.soldermask_margin! : 0
+  const soldermaskRingColor = getSoldermaskColor(pad.layer, colorMap)
+  const positiveMarginColor = colorMap.substrate
 
+  // Draw the copper pad
   if (pad.shape === "rect") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawRect({
+        ctx,
+        center: { x: pad.x, y: pad.y },
+        width: pad.width + margin * 2,
+        height: pad.height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        borderRadius:
+          ((pad as { corner_radius?: number }).corner_radius ??
+            pad.rect_border_radius ??
+            0) + margin,
+      })
+    }
+
+    // Draw the pad on top
     drawRect({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -38,10 +76,46 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
         pad.rect_border_radius ??
         0,
     })
+
+    // For negative margins, draw soldermask ring on top of the pad
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForRect(
+        ctx,
+        { x: pad.x, y: pad.y },
+        pad.width,
+        pad.height,
+        margin,
+        (pad as { corner_radius?: number }).corner_radius ??
+          pad.rect_border_radius ??
+          0,
+        0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        color,
+      )
+    }
     return
   }
 
   if (pad.shape === "rotated_rect") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawRect({
+        ctx,
+        center: { x: pad.x, y: pad.y },
+        width: pad.width + margin * 2,
+        height: pad.height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        borderRadius:
+          ((pad as { corner_radius?: number }).corner_radius ??
+            pad.rect_border_radius ??
+            0) + margin,
+        rotation: pad.ccw_rotation ?? 0,
+      })
+    }
+
+    // Draw the pad on top
     drawRect({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -55,10 +129,40 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
         0,
       rotation: pad.ccw_rotation ?? 0,
     })
+
+    // For negative margins, draw soldermask ring on top of the pad
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForRect(
+        ctx,
+        { x: pad.x, y: pad.y },
+        pad.width,
+        pad.height,
+        margin,
+        (pad as { corner_radius?: number }).corner_radius ??
+          pad.rect_border_radius ??
+          0,
+        pad.ccw_rotation ?? 0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        color,
+      )
+    }
     return
   }
 
   if (pad.shape === "circle") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawCircle({
+        ctx,
+        center: { x: pad.x, y: pad.y },
+        radius: pad.radius + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+      })
+    }
+
+    // Draw the pad on top
     drawCircle({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -66,10 +170,36 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
       fill: color,
       realToCanvasMat,
     })
+
+    // For negative margins, draw soldermask ring on top of the pad
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForCircle(
+        ctx,
+        { x: pad.x, y: pad.y },
+        pad.radius,
+        margin,
+        realToCanvasMat,
+        soldermaskRingColor,
+        color,
+      )
+    }
     return
   }
 
   if (pad.shape === "pill") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawPill({
+        ctx,
+        center: { x: pad.x, y: pad.y },
+        width: pad.width + margin * 2,
+        height: pad.height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+      })
+    }
+
+    // Draw the pad on top
     drawPill({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -78,10 +208,39 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
       fill: color,
       realToCanvasMat,
     })
+
+    // For negative margins, draw soldermask ring on top of the pad
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForPill(
+        ctx,
+        { x: pad.x, y: pad.y },
+        pad.width,
+        pad.height,
+        margin,
+        0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        color,
+      )
+    }
     return
   }
 
   if (pad.shape === "rotated_pill") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawPill({
+        ctx,
+        center: { x: pad.x, y: pad.y },
+        width: pad.width + margin * 2,
+        height: pad.height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        rotation: pad.ccw_rotation ?? 0,
+      })
+    }
+
+    // Draw the pad on top
     drawPill({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -91,6 +250,21 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
       realToCanvasMat,
       rotation: pad.ccw_rotation ?? 0,
     })
+
+    // For negative margins, draw soldermask ring on top of the pad
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForPill(
+        ctx,
+        { x: pad.x, y: pad.y },
+        pad.width,
+        pad.height,
+        margin,
+        pad.ccw_rotation ?? 0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        color,
+      )
+    }
     return
   }
 

package/lib/drawer/elements/soldermask-margin.ts

@@ -0,0 +1,266 @@
+import type { Matrix } from "transformation-matrix"
+import type { CanvasContext } from "../types"
+import { applyToPoint } from "transformation-matrix"
+
+/**
+ * Draws a soldermask ring for rectangular shapes with negative margin
+ * (soldermask appears inside the pad boundary)
+ */
+export function drawSoldermaskRingForRect(
+  ctx: CanvasContext,
+  center: { x: number; y: number },
+  width: number,
+  height: number,
+  margin: number,
+  borderRadius: number,
+  rotation: number,
+  realToCanvasMat: Matrix,
+  soldermaskColor: string,
+  padColor: string,
+): void {
+  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
+  const scaledWidth = width * Math.abs(realToCanvasMat.a)
+  const scaledHeight = height * Math.abs(realToCanvasMat.a)
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a)
+  const scaledRadius = borderRadius * Math.abs(realToCanvasMat.a)
+
+  ctx.save()
+  ctx.translate(cx, cy)
+
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180))
+  }
+
+  // For negative margins, outer is pad boundary, inner is reduced by margin
+  // Use source-atop so the ring only appears on the pad
+  const prevCompositeOp = ctx.globalCompositeOperation
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = "source-atop"
+  }
+
+  // Draw outer rectangle filled (at pad boundary)
+  const outerWidth = scaledWidth
+  const outerHeight = scaledHeight
+  const outerRadius = scaledRadius
+
+  ctx.beginPath()
+  if (outerRadius > 0) {
+    const x = -outerWidth / 2
+    const y = -outerHeight / 2
+    const r = Math.min(outerRadius, outerWidth / 2, outerHeight / 2)
+
+    ctx.moveTo(x + r, y)
+    ctx.lineTo(x + outerWidth - r, y)
+    ctx.arcTo(x + outerWidth, y, x + outerWidth, y + r, r)
+    ctx.lineTo(x + outerWidth, y + outerHeight - r)
+    ctx.arcTo(
+      x + outerWidth,
+      y + outerHeight,
+      x + outerWidth - r,
+      y + outerHeight,
+      r,
+    )
+    ctx.lineTo(x + r, y + outerHeight)
+    ctx.arcTo(x, y + outerHeight, x, y + outerHeight - r, r)
+    ctx.lineTo(x, y + r)
+    ctx.arcTo(x, y, x + r, y, r)
+  } else {
+    ctx.rect(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight)
+  }
+
+  ctx.fillStyle = soldermaskColor
+  ctx.fill()
+
+  // Reset composite operation and restore pad color in inner area
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over"
+  }
+
+  // Restore pad color in inner rectangle (reduced by margin)
+  const innerWidth = scaledWidth - scaledMargin * 2
+  const innerHeight = scaledHeight - scaledMargin * 2
+  const innerRadius = Math.max(0, scaledRadius - scaledMargin)
+
+  if (innerWidth > 0 && innerHeight > 0) {
+    ctx.beginPath()
+    if (innerRadius > 0) {
+      const x = -innerWidth / 2
+      const y = -innerHeight / 2
+      const r = Math.min(innerRadius, innerWidth / 2, innerHeight / 2)
+
+      ctx.moveTo(x + r, y)
+      ctx.lineTo(x + innerWidth - r, y)
+      ctx.arcTo(x + innerWidth, y, x + innerWidth, y + r, r)
+      ctx.lineTo(x + innerWidth, y + innerHeight - r)
+      ctx.arcTo(
+        x + innerWidth,
+        y + innerHeight,
+        x + innerWidth - r,
+        y + innerHeight,
+        r,
+      )
+      ctx.lineTo(x + r, y + innerHeight)
+      ctx.arcTo(x, y + innerHeight, x, y + innerHeight - r, r)
+      ctx.lineTo(x, y + r)
+      ctx.arcTo(x, y, x + r, y, r)
+    } else {
+      ctx.rect(-innerWidth / 2, -innerHeight / 2, innerWidth, innerHeight)
+    }
+
+    ctx.fillStyle = padColor
+    ctx.fill()
+  }
+
+  ctx.restore()
+}
+
+/**
+ * Draws a soldermask ring for circular shapes with negative margin
+ * (soldermask appears inside the pad boundary)
+ */
+export function drawSoldermaskRingForCircle(
+  ctx: CanvasContext,
+  center: { x: number; y: number },
+  radius: number,
+  margin: number,
+  realToCanvasMat: Matrix,
+  soldermaskColor: string,
+  padColor: string,
+): void {
+  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
+  const scaledRadius = radius * Math.abs(realToCanvasMat.a)
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a)
+
+  ctx.save()
+
+  // For negative margins, outer is pad boundary, inner is reduced by margin
+  // Use source-atop so the ring only appears on the pad
+  const prevCompositeOp = ctx.globalCompositeOperation
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = "source-atop"
+  }
+
+  // Draw outer circle filled (at pad boundary)
+  ctx.beginPath()
+  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2)
+  ctx.fillStyle = soldermaskColor
+  ctx.fill()
+
+  // Reset composite operation and restore pad color in inner area
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over"
+  }
+
+  // Restore pad color in inner circle (reduced by margin)
+  const innerRadius = Math.max(0, scaledRadius - scaledMargin)
+  if (innerRadius > 0) {
+    ctx.beginPath()
+    ctx.arc(cx, cy, innerRadius, 0, Math.PI * 2)
+    ctx.fillStyle = padColor
+    ctx.fill()
+  }
+
+  ctx.restore()
+}
+
+/**
+ * Draws a soldermask ring for pill shapes with negative margin
+ * (soldermask appears inside the pad boundary)
+ */
+export function drawSoldermaskRingForPill(
+  ctx: CanvasContext,
+  center: { x: number; y: number },
+  width: number,
+  height: number,
+  margin: number,
+  rotation: number,
+  realToCanvasMat: Matrix,
+  soldermaskColor: string,
+  padColor: string,
+): void {
+  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
+  const scaledWidth = width * Math.abs(realToCanvasMat.a)
+  const scaledHeight = height * Math.abs(realToCanvasMat.a)
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a)
+
+  ctx.save()
+  ctx.translate(cx, cy)
+
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180))
+  }
+
+  // For negative margins, outer is pad boundary, inner is reduced by margin
+  // Use source-atop so the ring only appears on the pad
+  const prevCompositeOp = ctx.globalCompositeOperation
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = "source-atop"
+  }
+
+  // Draw outer pill filled (at pad boundary)
+  const outerWidth = scaledWidth
+  const outerHeight = scaledHeight
+
+  ctx.beginPath()
+
+  if (outerWidth > outerHeight) {
+    const radius = outerHeight / 2
+    const straightLength = outerWidth - outerHeight
+    ctx.moveTo(-straightLength / 2, -radius)
+    ctx.lineTo(straightLength / 2, -radius)
+    ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2)
+    ctx.lineTo(-straightLength / 2, radius)
+    ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2)
+  } else if (outerHeight > outerWidth) {
+    const radius = outerWidth / 2
+    const straightLength = outerHeight - outerWidth
+    ctx.moveTo(radius, -straightLength / 2)
+    ctx.lineTo(radius, straightLength / 2)
+    ctx.arc(0, straightLength / 2, radius, 0, Math.PI)
+    ctx.lineTo(-radius, -straightLength / 2)
+    ctx.arc(0, -straightLength / 2, radius, Math.PI, 0)
+  } else {
+    ctx.arc(0, 0, outerWidth / 2, 0, Math.PI * 2)
+  }
+
+  ctx.fillStyle = soldermaskColor
+  ctx.fill()
+
+  // Reset composite operation and restore pad color in inner area
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over"
+  }
+
+  // Restore pad color in inner pill (reduced by margin)
+  const innerWidth = scaledWidth - scaledMargin * 2
+  const innerHeight = scaledHeight - scaledMargin * 2
+
+  if (innerWidth > 0 && innerHeight > 0) {
+    ctx.beginPath()
+
+    if (innerWidth > innerHeight) {
+      const radius = innerHeight / 2
+      const straightLength = innerWidth - innerHeight
+      ctx.moveTo(-straightLength / 2, -radius)
+      ctx.lineTo(straightLength / 2, -radius)
+      ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2)
+      ctx.lineTo(-straightLength / 2, radius)
+      ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2)
+    } else if (innerHeight > innerWidth) {
+      const radius = innerWidth / 2
+      const straightLength = innerHeight - innerWidth
+      ctx.moveTo(radius, -straightLength / 2)
+      ctx.lineTo(radius, straightLength / 2)
+      ctx.arc(0, straightLength / 2, radius, 0, Math.PI)
+      ctx.lineTo(-radius, -straightLength / 2)
+      ctx.arc(0, -straightLength / 2, radius, Math.PI, 0)
+    } else {
+      ctx.arc(0, 0, innerWidth / 2, 0, Math.PI * 2)
+    }
+
+    ctx.fillStyle = padColor
+    ctx.fill()
+  }
+
+  ctx.restore()
+}