# samukadev/canvas2svg architecture

> Architecture diagram of the GitHub repository samukadev/canvas2svg, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/samukadev/canvas2svg
- Repository: https://github.com/samukadev/canvas2svg

## Overview

Canvas2Svg is a small JavaScript runtime library that accepts Canvas 2D-style drawing operations and builds an SVG document. The principal workflow is to create a context, draw paths, shapes, text, or images through it, then retrieve the SVG or serialize it. The implementation is concentrated in one source file; documented capabilities are included, but details beyond the sampled excerpts are represented only where the README supports them.

Main entry points: [`canvas2svg.js`](https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js) (Canvas context)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_caller(("Drawing client"))
node_context["Canvas context<br/>[canvas2svg.js]"]
node_geometry["Paths and shapes<br/>[canvas2svg.js]"]
node_content["Text and images<br/>[canvas2svg.js]"]
node_paint["Styles and paint<br/>[canvas2svg.js]"]
node_svg["SVG document<br/>[canvas2svg.js]"]
node_serialized["Serialized SVG<br/>[canvas2svg.js]"]

node_caller -->|"draws through"| node_context
node_context -->|"creates elements"| node_geometry
node_context -->|"creates elements"| node_content
node_context -->|"applies styles"| node_paint
node_geometry -->|"appends elements"| node_svg
node_content -->|"appends elements"| node_svg
node_paint -->|"adds definitions"| node_svg
node_context -->|"exposes with getSvg"| node_svg
node_context -->|"serializes with getSerializedSvg"| node_serialized
node_serialized -->|"returns SVG text"| node_caller

click node_context "https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js"
click node_geometry "https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js"
click node_content "https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js"
click node_paint "https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js"
click node_svg "https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js"
click node_serialized "https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_caller toneBlue
class node_context,node_geometry,node_content,node_paint,node_svg,node_serialized toneTeal
```

## Components

### Other components

- **Drawing client**
- [Canvas context](https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js): `canvas2svg.js`
- [Paths and shapes](https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js): `canvas2svg.js`
- [Text and images](https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js): `canvas2svg.js`
- [Styles and paint](https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js): `canvas2svg.js`
- [SVG document](https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js): `canvas2svg.js`
- [Serialized SVG](https://github.com/samukadev/canvas2svg/blob/master/canvas2svg.js): `canvas2svg.js`

## Connections

- Drawing client → Canvas context: draws through
- Canvas context → Paths and shapes: creates elements
- Canvas context → Text and images: creates elements
- Canvas context → Styles and paint: applies styles
- Paths and shapes → SVG document: appends elements
- Text and images → SVG document: appends elements
- Styles and paint → SVG document: adds definitions
- Canvas context → SVG document: exposes with getSvg
- Canvas context → Serialized SVG: serializes with getSerializedSvg
- Serialized SVG → Drawing client: returns SVG text