@cobaltinc/atelier NPM

: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: