Draw [Circuit JSON](https://github.com/tscircuit/circuit-json) into a Canvas- works with any canvas object (Node/Vanilla)
npm install circuit-to-canvasDraw Circuit JSON into a Canvas- works with any canvas object (Node/Vanilla)

``tsx
const drawer = new CircuitToCanvasDrawer(canvasOrCanvasRenderingContext2d)
// Sets the internal transformation matrix for all operations
drawer.setCameraBounds({ minX: 0, maxX: 100, minY: 0, maxY: 100 })
drawer.configure({
colorOverrides: {
topCopper: "#ff0000"
}
})
// Accepts a circuit json array, by default draws on all layers
drawer.drawElements([pcbPlatedHole], {
layers: ["top_copper"]
})
`
There are two "types" of layers:
- Specific drawing layers e.g. "top_copper"
- Layer groups "top" (includes "top_copper", "top_soldermask")
inner layers go by the name inner1, inner2 etc.
This checklist tracks PCB drawing features from circuit-to-svg that are implemented in circuit-to-canvas.
- [x] pcb_board - Board outline with center/width/height or custom outlinepcb_trace
- [x] - PCB traces with route pointspcb_via
- [x] - Via holespcb_plated_hole
- [x] - Plated through-holes (circular, pill, oval shapes)pcb_hole
- [x] - Non-plated holes (circular, square, oval shapes)pcb_smtpad
- [x] - SMT pads (rect, circle, rotated_rect, pill shapes)pcb_copper_pour
- [x] - Copper pour areas (rect, polygon shapes)pcb_cutout
- [x] - Board cutouts (rect, circle, polygon shapes)
- [x] pcb_silkscreen_text - Text on silkscreen layerpcb_silkscreen_rect
- [x] - Rectangles on silkscreenpcb_silkscreen_circle
- [x] - Circles on silkscreenpcb_silkscreen_line
- [x] - Lines on silkscreenpcb_silkscreen_path
- [x] - Paths/routes on silkscreenpcb_silkscreen_pill
- [x] - Pill shapes (rounded rectangles) on silkscreen
- [x] pcb_copper_text - Text rendered on copper layers (supports knockout mode, mirroring)
- [ ] pcb_trace_error - Trace routing error indicatorspcb_footprint_overlap_error
- [ ] - Footprint overlap error indicators
- [ ] pcb_component - Component bounding box visualizationpcb_group
- [ ] - PCB group visualization with dashed outlinespcb_courtyard_rect
- [ ] - Component courtyard rectangles
- [x] pcb_fabrication_note_text - Fabrication note textpcb_fabrication_note_rect
- [x] - Fabrication note rectanglespcb_fabrication_note_path
- [x] - Fabrication note pathspcb_fabrication_note_dimension
- [ ] - Fabrication dimension annotations
- [x] pcb_note_text - General note textpcb_note_rect
- [x] - Note rectanglespcb_note_path
- [x] - Note pathspcb_note_line
- [x] - Note linespcb_note_dimension
- [x] - Dimension annotations
- [ ] pcb_panel` - PCB panel outlines for panelization
- [ ] Rats nest visualization - Unrouted connection indicators
- [ ] PCB grid overlay - Configurable grid with major/minor lines
- [ ] Soldermask rendering - Soldermask layer visualization
- [ ] Anchor offset indicators - Debug indicators for relative positioning