This is a simple drawing app that allows you to draw on a canvas with your mouse. You can change the color of the pen, the size of the pen, and the background color of the canvas. You can also save your drawing as a png file.

Live Demo: https://mdabbas-cse.github.io/draw-freehand/

To use this app, simply open the index.html file in your browser. You can then draw on the canvas with your mouse. You can change the color of the pen, the size of the pen, and the background color of the canvas. You can also save your drawing as a png file.

• Change the color of the pen.
• Change the size of the pen.
• Change the background color of the canvas.
• Change the type of pen (round or square)
• Change the opacity of the pen.
• Change the flow of the pen.
• Change the hardness of the pen.
• Change the tool type (brush, eraser & line).
• Download your drawing as a JPG, PNG, and SVG image format.
• Get the base64 of your drawing.

const canvasSelect = document.querySelector('canvas')

const canvas = new DrawFreehand.Freehand(canvasSelect, {
  penSize: 3,
  penColor: '#000000',
  penType: 'round',
  penOpacity: 1,
  penFlow: 1,
  penHardness: 1,
  backgroundColor: '#0e11df',
  toolType: 'brush',
})
// all options are default value, you can change it.

// clear canvas
document.querySelector('#clear').addEventListener('click', () => {
  canvas.clear()
})

// set pen size and color
const penColor = document.querySelector('#pen-color')
const penSize = document.querySelector('#pen-size')

penColor.addEventListener('change', (e) => {
  canvas.setPenColor(e.target.value)
})

penSize.addEventListener('change', (e) => {
  canvas.setPenSize(e.target.value)
})

• Chrome
• Firefox
• Microsoft Edge

MD. Abbas Uddin

Want to contribute? Great! To fix a bug or enhance an existing module, follow these steps:

• Fork the repo
• Create a new branch (git checkout -b [your branch name]])
• Install dependencies (npm install)
• Add changes to reflect the changes made
• Build the project (npm run build-rollup)
• Commit your changes (git commit -am 'Improve feature')
• Push to the branch (git push origin [your branch name]])
• Pull request are very welcome.

1.0.0

• Initial release

MIT © Rubel Amin | MD. Abbas Uddin