easy-drawing-board

a easy to use canvas-drawing lib 🎨

Usage no npm install needed!

<script type="module">
  import easyDrawingBoard from 'https://cdn.skypack.dev/easy-drawing-board';
</script>

README

easy-drawing-board

a easy to use drawing board lib 🎨

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.js"></script>

Play

live example

or

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

example1

example1

Usage

Initialize

<script type="text/javascript" src="//{you path to the dist file}/dist/easy-drawing-board.js"></script>
<style>.container { width: 500px; height: 500px; }</style>
<div class="container"></div>
// See below for document.
const options = {
  container: document.getElementsByClassName('container')[0]
}
// canvas's width/height equals container's 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 |

APIs

| Method | Arguments | Description | | :-: | :- | :- | | config( type,val ) | tpye's enum(lineColor, lineWidth, arrowSize, eraserSize, canvasBgColor, textFontSize, textLineHeight, textColor, bgImg) | Modifying the default configuration | | setMode( mode ) | mode's enum(pencil, straightLine, rect, circle, arrow, 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 | | clear() | / | Clear canvas |

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.

Todo

  • eraser
  • undo
  • typescript refactoring

License

MIT