Skip to content
jQuery plugin that draws an interactive paint grid similar to MS Paint (also support non-interactive mode for programmatic access)
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
stylesheets
LICENSE
README.md
index.html
paintbox.js
params.json

README.md

jquery-paintbox

jQuery plugin that draws an interactive paint grid similar to MS Paint (also support non-interactive mode for programmatic access)

Latest release

Plans

See issues.

Usage

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/libs/jquery-paintbox/paintbox.js"></script>

<div id='container'></div>

<script>
    $('#container').paintbox({});
</script>

Options

You should specify options like in usage example above.

Name Type Default Description
rows integer 50 Number of rows.
cols integer 50 Number of columns.
cell integer 10 Cell dimension in pixels
colors array ... Override colors for pallete via array of CSS colors.
interactive boolean true Whether the paintbox should expect mouse input and draw a palette.

Methods

There are a few methods to programmatically change the painting.

Method Param Type Description
cell {i : row, j : col, color: css} object You specify the grid coordinate and color
line {i : row, j : col, color: css, direction: left, length: blocks} object You specify the starting point, direction and length. If any of it is invalid, it raises an exception
rect {i: row, j: col, i2: row, j2: col, color: css} object You specify two points and it builds in a filled-in rectangle there.
fill {i: row: j: col, color: css} object Given this point, fill that area with the specified color.

License

Apache License 2.0

You can’t perform that action at this time.