Create A Drawing & Signature App With jQuery And HTML5 Canvas
File Size: | 7.2 KB |
---|---|
Views Total: | 16669 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Basic Canvas Paint is a jQuery plugin used to generate a touch-enabled drawing/paint/signature web app using HTML5 canvas and a little bit JavaScript.
Features:
- Mobile-friendly.
- Color picker.
- Export as an image.
How to use it:
1. Import jQuery JavaScript library and the Basic Canvas Paint plugin's files into the document.
<link rel="stylesheet" href="css/bcPaint.css"> <link rel="stylesheet" href="css/bcPaint.mobile.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="js/bcPaint.js"></script>
2. Create a container element in which you want to place the canvas.
<div id="bcPaint"></div>
3. Initialize the Basic Canvas Paint plugin. Done.
$(function(){ $('#bcPaint').bcPaint(); });
4. Customize the colors for the color picker.
$(function(){ $('#bcPaint').bcPaint({ // default color defaultColor : '000000', // default color set colors : [ '000000', '444444', '999999', 'DDDDDD', '6B0100', 'AD0200', '6B5E00', 'FFE000', '007A22', '00E53F', '000884', '000FFF' ], // extend default set addColors : [] }); });
Changelog:
2021-05-22
- JS & CSS Update
This awesome jQuery plugin is developed by bobkovalex. For more Advanced Usages, please check the demo page or visit the official website.