https://github.com/cdaein/draw
drawing utilities for HTML5 Canvas
https://github.com/cdaein/draw
Last synced: about 2 months ago
JSON representation
drawing utilities for HTML5 Canvas
- Host: GitHub
- URL: https://github.com/cdaein/draw
- Owner: cdaein
- License: mit
- Created: 2022-12-29T03:40:28.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-02T03:32:08.000Z (6 months ago)
- Last Synced: 2025-02-06T02:44:19.591Z (4 months ago)
- Language: TypeScript
- Size: 711 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @daeinc/draw
drawing utilities for HTML5 Canvas.
## Install
```sh
npm i @daeinc/draw
```
then,
```ts
import { ... } from "@daeinc/draw"
```
## CDN
```js
import { ... } from "https://cdn.jsdelivr.net/npm/@daeinc/draw/dist/draw.esm.js"
```
## Functions
It uses two custom types, `Pt` and `Pts`, each representing `number[]` and `Pt[]`.
```ts
import type { Pt, Pts } from "@daeinc/geom";
```
### drawCircle
```ts
const drawCircle: (ctx: CanvasRenderingContext2D, pt: Pt, diam: number) => void;
```
### drawFillText
```ts
const drawFillText: (
ctx: CanvasRenderingContext2D,
msg: string,
pt: Pt,
) => void;
```
### drawLine
```ts
const drawLine: (ctx: CanvasRenderingContext2D, pt1: Pt, pt2: Pt) => void;
```
### drawPath
```ts
const drawPath: (
ctx: CanvasRenderingContext2D,
path: Pts,
close?: boolean,
) => void;
```
### drawSmoothPath
```ts
const drawSmoothPath: (ctx: CanvasRenderingContext2D, path: Pts) => void;
```
Uses quadratic curves to smoothen hard edges of path. The input path is expected to be generated with `generateSmoothPath()` from another package `@daeinc/geom`.
## License
MIT