:rocket: Getting started

npm install @cobaltinc/atelier # or yarn add @cobaltinc/atelier

import React from 'react'
import { Atelier } from '@cobaltinc/atelier'

<Atelier />

Demo page: 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 for an example of this. Prop | Description ---- | ----------- draw(e: DrawingInterface) | Draw programmatically on the canvas clear() | Erase everything on the canvas

🖋️ Default Plugins

import React from 'react'
import {
  Atelier,
  PenPlugin,
  BrushPlugin,
  ErasePlugin,
  HighlighterPlugin,
  LaserPlugin
} from '@cobaltinc/atelier'

<Atelier plugins={[PenPlugin, BrushPlugin, ErasePlugin, HighlighterPlugin, LaserPlugin]} />

🖌️ Custom Plugin

If you want new plugin, you can make easily.

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,
      });
    }
  }
}

<Atelier command="dash" plugins={[DashPlugin]} />

And the result:

:page_facing_up: License

Atelier is made available under the MIT License.