easy-drawing-board

a easy to use drawing board lib 🎨

• 0 dependencies
• Modern browser compatibility

Installing

Using npm:

npm install easy-drawing-board

Using yarn:

yarn add easy-drawing-board

Using script tag

<script src="your_path/dist/easy-drawing-board.min.js"></script>

Play

live example

or

git clone this repository then open example/index.html in your browser

Usage

Initialize

<script type="text/javascript" src="//{you path to the dist file}/dist/easy-drawing-board.min.js"></script>
<style>.container { width: 500px; height: 500px; }</style>
<div class="container"></div>

// More options are available in the following documents
const options = {
  container: document.getElementsByClassName('container')[0]
}
/*
  A canvas has 2 sizes, the dimension of the pixels in the canvas and the display size. 
  canvas's dimension of the pixels is (devicePixelRatio * canvas's display size) by default.
  canvas's display size equals container's size (width/height)
*/  
const draw = new EasyDrawingBoard(options); 

Options

Options	Type	Default value	Description
container	HtmlDom (required)	/	Container for canvas
bgImg	String	Empty string	Canvas background Image's url, if you needed.
canvasBgColor	String	#fff	Canvas background Color
lineColor	String	#f00	Color of brush
lineWidth	String / Number	1	Width of brush
arrowSize	String / Number	15	Size of arrows
eraserSize	String / Number	10	Size of eraser
textFontSize	String / Number	16	Font size of the textArea
textLineHeight	String / Number	20	Font lineheight of the textArea
textColor	String	#f00	Font color of the textArea
textareaPlaceholder	String	Type here...	Textarea's placeholder
ratio	Nubmer	window.devicePixelRatio	Affects the quality of the picture

APIs

Method	Arguments	Description
config( type,val )	tpye's enum(lineColor, lineWidth, arrowSize, eraserSize, canvasBgColor, textFontSize, textLineHeight, textColor, bgImg, textareaPlaceholder, ratio)	Modifying the default configuration
setMode( mode )	mode's enum(pencil, straightLine, rect, circle, arrow, text, eraser)	Set current mode
saveImg( [options] )	default value { tpye: 'png', fileName: 'canvas_imgae' }	Save the canvas as an image, and download.
generateBase64([type])	default value "png"	Generate Base64 data
undo()	/	Undo operation
redo()	/	Redo operation
clear()	/	Clear canvas

Listeners

coords it will return canvas's coords (x, y) and Mouse's coords (clientX, clientY)

drawBegin

  import EasyDrawingBoard from 'easy-drawing-board'
  const draw = new EasyDrawingBoard({container: Dom})
  draw.evt.on('drawBegin', function(coords) {
    console.log('begin', coords);  
  })

drawing

  draw.evt.on('drawing', function(coords) {
    console.log('drawing', coords);  
  })

drawEnd

  draw.evt.on('drawEnd', function(coords) {
    console.log('end', coords);
  })

removeListeners

  draw.evt.off('drawBegin');
  draw.evt.off('drawing');
  draw.evt.off('drawEnd');
  // or
  draw.evt.removeAllListeners();

Example

  // init
  import EasyDrawingBoard from 'easy-drawing-board'
  const container = document.getElementsByClassName('container')[0]
  const draw = new EasyDrawingBoard({container: container})

  // methods
  draw.conifg('lineColor', '#FF1493')                         // Change the color of the brush.
  draw.setMode('rect')                                        // Now you can draw the rectangle.

  draw.generateBase64().then(data => console.log(data))       // generateBase64 method default is to export the PNG base64 data.                              
  draw.generateBase64('jpeg').then(data => console.log(data)) // get smaller data.                          

  draw.saveImg()                                              // Save the canvas as an PNG images, and the file name is canvas_imgae.png.
  draw.saveImg({fileName: '233.png'})                         // Just Change of file name.
  draw.saveImg({tpye: 'jpeg', fileName: 'small.jpeg'})        // Sometimes we just need smaller pictures.

License

MIT