Create A Drawing & Signature App With jQuery And HTML5 Canvas

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.