jquery-paintbox

The Basics

I started this just to have fun over a lunch break to have a custom MS Paint written in JavaScript. But it's going to do more and more, and I'm going to make it extendible.

Installation

Basically just include the file.

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

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

<script>
    $('#container').paintbox({rows: 10, cols: 10});
</script>

Usage

Demos

I will put a few demos here.

Default paintbox

$('#container').paintbox({});

I put a black background the div because it's default off-color is white.

Specified dimensions

A box where we specify the dimensions

$('#container_2').paintbox({rows: 25, cols: 25});

I put a black background the div because it's default off-color is white.

Specified cell dimensions

A box where we specify the cell dimensions as 5 pixels instead of the default 10.

$('#container_3').paintbox({rows: 25, cols: 25, cell: 5});

I put a black background the div because it's default off-color is white.

Specified other colors

Replace the colors with our own.

$('#container_4').paintbox({colors: ['red', 'purple', 'fuchsia', 'green'], rows: 10, cols: 10});

I put a black background the div because it's default off-color is white.

Programmatic only

You can make the programmatic updates in any mode, however if you only plan to then you can set interactive to false.

$('#container_9').paintbox({interactive: false, rows: 10, cols: 10});
$('#container_9').paintbox('cell', {i : 4, j: 5, color: 'black'});

I put a black background the div because it's default off-color is white.

Programmatic cell update

You can do this, or you can really just trigger a click if you're so inclined, that however will use the current pen color & settings. -- triggering the click doesn't work in non-interactive mode.

$('#container_5').paintbox({colors: ['red', 'purple', 'fuchsia', 'green'], rows: 10, cols: 10});
$('#container_5').paintbox('cell', {i : 4, j: 5, color: 'black'});

I put a black background the div because it's default off-color is white.

Programmatic line drawing

Does not presently support diagonal lines. I may implement this if I switch to a canvas base.

I included a lot of failing varities to test and for fun. The following four bullets should hold errors.

$('#container_6').paintbox({rows : 10, cols: 11});
$('#container_6').paintbox('line', {i : 2, j: 5, color: 'black', direction: 'left', length: 5});
$('#container_6').paintbox('line', {i : 4, j: 4, color: 'red', direction: 'right', length: 5});
$('#container_6').paintbox('line', {i : 4, j: 9, color: 'green', direction: 'up', length: 5});
$('#container_6').paintbox('line', {i : 5, j: 2, color: 'blue', direction: 'down', length: 5});

I put a black background the div because it's default off-color is white.

Programmatic rectangles

This code finds the upper left and lower right points and fills it in from there.

$('#container_7').paintbox({rows : 10, cols: 11});
$('#container_7').paintbox('rect', {i : 1, j: 2, i2: 1, j2: 5, color: 'black'});
$('#container_7').paintbox('rect', {i : 3, j: 5, i2: 6, j2: 1, color: 'red'});
$('#container_7').paintbox('rect', {i : 2, j: 8, i2: 6, j2: 8, color: 'blue'});

I put a black background the div because it's default off-color is white.

Programmatic paint fill

A way to fill an area like the MS paint bucket tool.

$('#container_8').paintbox({rows : 10, cols: 11});
$('#container_8').paintbox('rect', {i : 0, j: 0, i2: 9, j2: 10, color: 'red'});
$('#container_8').paintbox('rect', {i : 1, j: 1, i2: 8, j2: 9, color: 'white'});
$('#container_8').paintbox('line', {i : 1, j: 3, color: 'green', direction: 'down', length: 3});
$('#container_8').paintbox('line', {i : 3, j: 4, color: 'green', direction: 'right', length: 3});
$('#container_8').paintbox('fill', {i : 4, j: 6, color: 'blue'});

I put a black background the div because it's default off-color is white.

Different background coloe

A way to control the background color.

$('#container_10').paintbox({rows : 10, cols: 11, offColor: 'blue'});

I put a black background the div because it's default off-color is white.

License

Apache License 2.0