https://github.com/cobaltinc/atelier
Expandable drawing component for React built by Cobalt, Inc.
https://github.com/cobaltinc/atelier
canvas drawing react
Last synced: 11 months ago
JSON representation
Expandable drawing component for React built by Cobalt, Inc.
- Host: GitHub
- URL: https://github.com/cobaltinc/atelier
- Owner: cobaltinc
- License: mit
- Created: 2021-07-30T07:43:49.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-05-25T12:41:59.000Z (about 3 years ago)
- Last Synced: 2025-08-02T03:34:00.529Z (11 months ago)
- Topics: canvas, drawing, react
- Language: TypeScript
- Homepage: https://cobaltinc.github.io/atelier
- Size: 1.28 MB
- Stars: 46
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Atelier 🎨
Expandable drawing component for React built by Cobalt, Inc.
## :rocket: Getting started
```bash
npm install @cobaltinc/atelier # or yarn add @cobaltinc/atelier
```
```jsx
import React from 'react'
import { Atelier } from '@cobaltinc/atelier'
```
Demo page: [`https://cobaltinc.github.io/atelier`](https://cobaltinc.github.io/atelier)
### Props
Prop | Description | Default
---- | ----------- | -------
`command` | Set the name of registered plugin | `pen`
`color` | Set the color of the line | `#000000`
`lineWidth` | Set the width of the line | `2`
`width` | Set the width of the DOM | `800`
`height` | Set the height of the DOM | `600`
`canvasWidth` | Set the width of the canvas
`canvasHeight` | Set the height of the canvas
`enableDraw` | Set to `true` or `false` to enable or disable draw the canvas | `true`
`enablePressure` | Set to `true` or `false` to enable or disable pressure the canvas | `false`
`plugins` | Register the plugins to use | `[PenPlugin]`
`style` | Add inline styles to the root element
`className` | Add className to the root element
`onChange(e: AtelierChangeEvent)` | Fired when an alteration to canvas is commited
### Instance Methods
Use `ref` to call instance methods. See the [demo page](https://cobaltinc.github.io/atelier) for an example of this.
Prop | Description
---- | -----------
`draw(e: DrawingInterface)` | Draw programmatically on the canvas
`clear()` | Erase everything on the canvas
## 🖋️ Default Plugins
PenPluginBrushPlugin
(Support pressure)ErasePlugin
HighlighterPluginLaserPlugin
```jsx
import React from 'react'
import {
Atelier,
PenPlugin,
BrushPlugin,
ErasePlugin,
HighlighterPlugin,
LaserPlugin
} from '@cobaltinc/atelier'
```
## 🖌️ Custom Plugin
If you want new plugin, you can make easily.
```tsx
class DashPlugin extends Plugin {
name: string = 'dash';
prevX: number;
prevY: number;
draw(data: DrawingInterface) {
super.draw(data);
const { x, y, state } = data;
const context = this.canvas?.getContext('2d');
context.setLineDash([5, 30]);
const prevX = this.prevX || x;
const prevY = this.prevY || y;
if (state === 'draw-started' || state === 'drawing') {
context.beginPath();
context.moveTo(prevX, prevY);
context.lineTo(x, y);
context.stroke();
context.closePath();
Object.assign(this, {
lastX: x,
lastY: y,
});
}
}
}
```
And the result:
## :page_facing_up: License
Atelier is made available under the [MIT License](./LICENSE).