Atelier 🎨

Expandable drawing component for React built by Cobalt, Inc.

🚀 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

PenPlugin	BrushPlugin (Support pressure)	ErasePlugin
HighlighterPlugin	LaserPlugin

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:

📄 License

Atelier is made available under the MIT License.