# pencil
**Repository Path**: mirrors_josdejong/pencil
## Basic Information
- **Project Name**: pencil
- **Description**: Vector based drawing in your browser
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-16
- **Last Updated**: 2026-02-14
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Pencil
Vector based drawing in your browser.
Features:
- A pure ESM JavaScript component in one file, `pencil.js`.
- Draw using your mouse or using touch.
- Use strike-through to remove strokes.
- Dynamically resized drawing area.
- Export to SVG or PNG.
## Demo
Try it out: https://josdejong.github.io/pencil/
## Usage
You need one file: `pencil.js`.
```html
```
## API
```js
const drawingArea = createDrawingArea(config)
```
Here, config is an object `DrawingAreaConfig` with the following properties:
| Name | Type | Required | Description |
|-----------------------|--------------------|----------|----------------------------------------------------------------|
| `target` | `HTMLDivElement` | Yes | The HTML DIV where to create the drawing area |
| `strokeColor` | `string` | No | The color of the lines |
| `strokeWidth` | `number` | No | The width of the lines |
| `enableStrikeThrough` | `boolean` | No | When true, you can use strike through to clear a drawn stroke. |
| `onChange` | `function(): void` | No | Callback which is invoked after a new line is drawn. |
The created `DrawingArea` has the following methods:
| Name | Type | Description |
|-------------|-------------------------------|--------------------------------------------|
| `getTraces` | `function(): Trace[]` | Get a list with all traces as JSON |
| `getSVG` | `function(): string` | Get a data url containing the image as SVG |
| `getPNG` | `function(): Promise` | Get a data url containing the image as PNG |
| `clear` | `function(): void` | Clear all drawn lines. |
| `destroy` | `function() : void` | Destroy the drawing area. |