Creating A Pixel Art Drawing App With jQuery - Pixel Picker

Pixel Picker is a jQuery plugin to create a simple drawing app which allows you to draw pixel art with dots.

Features:

• Click to fill a cell
• Right click to fill a cell in reverse
• CMD (or CTRL) click to erase the cell's color
• Click and drag around to fill surrounding cells with that same color

How to use it:

1. Load the required pixel-picker.css in the head section that provides the basic styles.

<link href="pixel-picker.css" rel="stylesheet">

2. Create a container for the pixel art drawing app and add cells into it.

<div class="pixel-picker-container">

  <div class="pixel-picker-row">
    <div class="pixel-picker-cell"></div>
    <div class="pixel-picker-cell"></div>
    <div class="pixel-picker-cell"></div>
    ...
  </div>

  <div class="pixel-picker-row">
    <div class="pixel-picker-cell"></div>
    <div class="pixel-picker-cell"></div>
    <div class="pixel-picker-cell"></div>
    ...
  </div>

  <div class="pixel-picker-row">
    <div class="pixel-picker-cell"></div>
    <div class="pixel-picker-cell"></div>
    <div class="pixel-picker-cell"></div>
    ...
  </div>

  ...

</div>

3. Load the pixel-picker.js after jQuery library but before the closing body tag.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="pixel-picker.js"></script>

4. Initialize the drawing app.

$('.pixel-picker-container').pixelPicker();

5. Customization options available.

$('.pixel-picker-container').pixelPicker({

  // The jQuery selectors to locate rows and cells
  rowSelector: '.pixel-picker-row',
  cellSelector: '.pixel-picker-cell',

  // The color used for the eraser
  eraserColor: null,

  // The default colors that can be used to fill cells.
  palette: [
    '#ffffff', '#000000',
    '#ff0000', '#0000ff',
    '#ffff00', '#008000'
  ],

  // fires when the color map (cells) gets updated
  update: null,

  // fires when the plugin is ready
  ready: null,
  
});

---

This awesome jQuery plugin is developed by DesignerNews. For more Advanced Usages, please check the demo page or visit the official website.