Drawer

Tip

Watch docs and demo here

Dependencies

• Coloris for color input better managing

Get started

install

npm i @fabwcie/drawer

usage

Using module

import { Drawer } from "@fabwcie/drawer";

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

Using iife

first import file

<script src="path/to/drawer.iife.js"></script>

then init drawer

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

Get Drawer instance of canvas

Drawer instance stored into $canvas object directly, for example:

const $canvas = document.getElementById('canvas');
const drawer = $canvas.drawer;

drawer.setTool('eraser');
// ...

Available options

default options

{
  id: Date.now().toString(), // id for drawer
  defaultToolbar: true, // add default sidebar bouton
  width: 400, // width
  height: 400, // height
  localStorageKey: 'draw', // local storage key for save
  autoSave: true, // save on change in localStorage
  toolbarPosition: 'outerTop', // can be 'outerTop', 'outerEnd', 'outerBottom', 'outerStart', 'innerTop', 'innerEnd', 'innerBottom', 'innerStart'
  bgColor: '#fff', // can be format hex, rgba, rgba, hlsa
  color: '#000', // can be format hex, rgba, rgba, hlsa
  lineThickness: 3, // Line thickness
  dotted: false, // active line dotted
  dash: [10, 5], // if dotted true
  cap: 'round', // "butt" | "round" | "square"
  fill: true, // fill draw
  availableColor: undefined, // for input color
  availableColorOnly: false, // show color only into colorpicker popover
  grid: false, // show css grid for draw helping
  guides: false, // show guide when drawing
  opacity: 1, // global opacity of draw
  xor: false, // active xor
};