Pixel Art Drawing Tool In jQuery - pixel-art-jquery.js

A lightweight jQuery Pixel Art Drawing plugin that lets you draw pixel lines, shapes, text, and images online.

It is an open source library for fast 2D drawing on the web. Files can be imported or exported as HTML.

Built with plain HTML, CSS, and JavaScript (jQuery). No SVG, Image, Canvas needed.

How to use it:

1. Load the pixel-art-jquery.js plugin's files in the document.

<link rel="stylesheet" href="/path/to/pixel-art-jquery.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/pixel-art-jquery.js"></script>

2. Create an empty container for the Pixel Art Drawing Tool.

<div id="wrapper"></div>

3. Create an empty container for the Pixel Art Drawing Tool.

<div id="color_switcher_wrap">
  <!-- Color Switcher -->
  <div id="color_switcher">
    <label for="body" id="choose_color">color :</label>
    <input type="color" id="choose_color_body" name="body" value="#000000">
    <datalist id="presetColors">
      <option id="opt" style="background-color: #ff0000;" value="#ff0000"/></option>
      <option id="opt" style="background-color: #0400ff;" value="#0400ff"/></option>
      <option id="opt" style="background-color: #00ff14;" value="#00ff14"/></option>
      <option id="opt" style="background-color: #fbff00;" value="#fbff00"/></option>
      <option id="opt" style="background-color: #b96600;" value="#b96600"/></option>
      <option id="opt" style="background-color: #00adff;" value="#00adff"/></option>
    </datalist>
  </div>
  <!-- Import Data -->
  <div id="load_file">
    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>
  </div>
  <!-- Export Data -->
  <div id="button_save">
    <input type="button" id="input_button_save" name="save" value="save">
  </div>
  <!-- Clear Data -->
  <div id="button_clear">
    <input type="button" id="input_button_clear" name="clear" value="clear">
  </div>
</div>

---

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