@fabwcie/free-drawing

free-drawing

Inspired from drawer is totally rewritting and rethinking for better use to more complexe context. For simply use, i recommend to you to use drawer

📝 Check documentation here

Check demo here

Dependencies

• KonvaJS
• perfect-freehand

Contribute

See Contribute guide

Install

yarn add @fabwcie/free-drawing

Use it

import { Drawer } from '@fabwcie/free-drawing';

const $el = document.getElementById('drawer-container');
const drawer = new Drawer($el, {
  /** optional options */
});

Available options

{
  id: 'drawer-' + Date.now(), // id for drawer
  tool: 'brush', // activate tool on init
  width: window.innerWidth, // width of drawer
  height: window.innerHeight, // height of drawer
  strokeWidth: 5, // width for drawing stroke
  strokeColor: '#000', // color for drawing stroke
  zoom: true, // enable/disable zoom on draw
  zoomWidget: true, // enable/disable zoom ui widget
  scaling: 1.11, // scaling on zoom
  autoSave: true, // for save draw state on localStorage automatically
  localStorageKey: 'free-drawing', // localStorage key used for store data
  opacity: 1, // opacity of draw
};