# @hitomihiumi/lazy-canvas
> Simple module for using canvas in lazy method
Latest version **1.5.1** (published 2024-10-14) · MIT license · 0 weekly downloads
## Install
```sh
npm install @hitomihiumi/lazy-canvas
pnpm add @hitomihiumi/lazy-canvas
yarn add @hitomihiumi/lazy-canvas
bun add @hitomihiumi/lazy-canvas
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.5.1 |
| Published | 2024-10-14 |
| First published | 2024-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 268.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | hitomihiumi |
| Maintainers | hitomihiumi |
| Keywords | canvas, lazycanvas, napi-rs/canvas, jimp, svgson, lazy, simple, easy |
## Links
- npm: https://www.npmjs.com/package/@hitomihiumi/lazy-canvas
- Repository: https://github.com/hitomihiumi/lazy-canvas-ts
- Homepage: https://github.com/hitomihiumi/lazy-canvas-ts#readme
- Issues: https://github.com/hitomihiumi/lazy-canvas-ts/issues
- npm.io page: https://npm.io/package/@hitomihiumi/lazy-canvas
## Dependencies (4)
- [jimp](https://npm.io/package/jimp.md) ^0.22.12
- [path](https://npm.io/package/path.md) ^0.12.7
- [svgson](https://npm.io/package/svgson.md) ^5.3.1
- [@napi-rs/canvas](https://npm.io/package/@napi-rs/canvas.md) ^0.1.55
## Alternatives
- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads
## Recent versions
- 1.5.1 (latest) — 2024-10-14
- 1.4.0-dev.172z57lx02u0zs13ng838pa (dev) — 2024-09-18
- 1.5.0 — 2024-10-11
- 1.4.1 — 2024-09-26
- 1.4.0 — 2024-09-20
- 1.4.0-dev.v5tdvp68d7k1orvyi8qdtm — 2024-09-18
- 1.4.0-dev.9mjqkhxvaplhfb53u01efk — 2024-09-14
- 1.4.0-dev.1ccamxwlbir3itkpsrfl61 — 2024-09-11
- 1.3.4 — 2024-09-07
- 1.3.3 — 2024-09-01
- 1.3.2 — 2024-09-01
- 1.3.1 — 2024-08-30
- 1.3.0 — 2024-08-23
- 1.3.0-dev.kjlic0y2m15gvn50k796r — 2024-08-13
- 1.2.1 — 2024-07-20
- … 29 more at https://npm.io/package/@hitomihiumi/lazy-canvas/versions
## README
# IMPORTANT
ALL CODE BELOW 1.5.0 IS DEPRECATED, PLEASE UPDATE YOUR CODE TO THE NEWEST VERSION
# Introduction
This is a simple module designed to simplify the interaction with canvas, for people who do not know how to work with it.
## Get Started
1. Install the module by using `npm i @hitomihiumi/lazy-canvas`
2. Enjoy!
## Documentation
You can find the documentation [here](https://docs.hitomihiumi.xyz/)
## Example
```ts
import { LazyCanvas, EllipseImageLayer, EllipseLayer, TextLayer, Font, CircleLayer, Outline, Centering, OutlineType, TextAlign, saveFile } from '@hitomihiumi/lazy-canvas'
let font = new Font()
.setFamily("JoeKubert")
.setWeight("regular")
.setPath("./fonts/v_CCJoeKubert-Doubled_v1.3.ttf")
let background = new EllipseImageLayer()
.setX(300)
.setY(100)
.setWidth(600)
.setHeight(200)
.setRadius(50)
.setImage('https://images.wallpapersden.com/image/download/amazing-desert-hd-cool-aesthetic_bWpoammUmZqaraWkpJRmZ2VlrWllZQ.jpg')
let blackout = new EllipseLayer()
.setX(300)
.setY(100)
.setWidth(598)
.setHeight(198)
.setRadius(50)
.setColor('#000')
.setAlpha(0.4)
.setOutline(
new Outline()
.setColor('#fff')
.setStroke(2)
.setType(OutlineType.inner)
)
let avatar = new EllipseImageLayer()
.setX(100)
.setY(100)
.setWidth(150)
.setHeight(150)
.setRadius(50)
.setImage('https://i.pinimg.com/1200x/f3/32/19/f332192b2090f437ca9f49c1002287b6.jpg')
.setOutline(
new Outline()
.setColor('#fff')
.setStroke(2)
.setType(OutlineType.center)
)
let bgprogress = new EllipseLayer()
.setX(372.5)
.setY(142.5)
.setWidth(365)
.setHeight(35)
.setRadius(17.5)
.setColor('#fff')
let progress = new EllipseLayer()
.setX(192.5)
.setY(127.5)
.setWidth(180)
.setHeight(30)
.setRadius(15)
.setColor('#ff8a8a')
.setCentering(Centering.legacy)
let lvlbg = new CircleLayer()
.setX(160)
.setY(160)
.setRadius(20)
.setColor('#ff8a8a')
.setOutline(
new Outline()
.setColor('#fff')
.setStroke(1.5)
.setType(OutlineType.center)
)
let name = new TextLayer()
.setX(200)
.setY(120)
.setText('LazyCanvas')
.setFont("JoeKubert")
.setFontSize(25)
.setColor('#fff')
.setAlign(TextAlign.left)
let xp = new TextLayer()
.setX(550)
.setY(120)
.setText('50/100')
.setFont("JoeKubert")
.setFontSize(20)
.setColor('#fff')
.setAlign(TextAlign.right)
let lvl = new TextLayer()
.setX(159)
.setY(172)
.setText('1')
.setFont("JoeKubert")
.setFontSize(33)
.setColor('#fff')
.setAlign(TextAlign.center)
const lazy = new LazyCanvas()
.createNewCanvas(600, 200)
.loadFonts(font)
.addLayers(background, blackout, avatar, bgprogress, progress, lvlbg, name, xp, lvl)
async function main() {
let data = await lazy.renderImage()
await saveFile(data, 'png', 'output')
}
main()
```
## To Do
- [x] Migration to TypeScript
- [x] Migration from `node-canvas` to `@napi-rs/canvas`
- [x] Add more tests
- [ ] Add more examples
- [x] Add more documentation
- [ ] Add more shapes
- [ ] Add more features
---
_Source: https://npm.io/package/@hitomihiumi/lazy-canvas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._