JQuery color filler plugin for HTML5 canvas

  1. Download JQuery (tested on version 2.1.4) and paintbucket.js (uncompressed or compressed).
  2. Add a canvas element.
    3. <canvas id="my-canvas"></canvas>
  3. Add a button element to toggle the paintbucket tool on/off.
    4. <button id="my-paintbucket-btn">Fill color</button>
  4. Add script to initialize the plugin.
    5. $('#my-paintbucket-btn').paintbucket('#my-canvas');

Changing Fill Color

The fill color information is stored as hex format in the data-fill-color attribute in the button element which we attach the plugin to.

We can use the Bootstrap Colorpicker plugin to select/change the fill colors as follows:

<input type="text" class="colorpicker-input" />
$('.colorpicker-input').colorpicker().on('changeColor.colorpicker', function (event) {
  $('#my-paintbucket-btn').data('fill-color', event.color.toHex());
});