Paint online with jQuery

Posted on July 26th, 2015. Written by Dave.

Here is a tutorial on how to create a basic jQuery paint application.

You can see it in action here.

The HTML / CSS

To start we need to create the canvas. The canvas consists of a div with the class paint_box, this div contains hundreds of smaller divs with the class block. These blocks make up the canvas. You can see the CSS for these below :

.paint_box {
	height: 525px;
	width: 575px;
	margin-top: 50px;
	margin-right: auto;
	margin-left: auto;
	position: absolute;
	background-color: #CCC;
	left: 300px;
	top: 10px;
	border: 20px solid #eee;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
.paint_box .block {
	float: left;
	height: 10px;
	width: 10px;
}

Each of these inner blocks is 10 x 10 pixels and is set to float left. These blocks will change color as soon as the user hovers over them, hence creating the paint effect.

The color Picker

The next step is to allow the user to select several different colors. We do this by creating a simple color picker with the choice of 6 colors.

The color picker is simply a table with 6 cells, each cell has a color and when clicked this becomes the brush color.

<h2>Colour Picker</h2>
  <table width="241" height="39" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="41" height="30" bgcolor="#FF0000"> </td>
      <td width="40" height="30" bgcolor="#00FF00"> </td>
      <td width="40" height="30" bgcolor="#FFCC99"> </td>
      <td width="40" height="30" bgcolor="#FFFF00"> </td>
      <td width="40" height="30" bgcolor="#CCCCCC"> </td>
      <td width="40" height="30" bgcolor="#000000"> </td>
    </tr>
  </table>

When any of the td’s above are clicked the jQuery will take the bgcolor attribute and set it as the brush color.

    $('.tool_box td').click(function () {
        brush_color = $(this).attr("bgcolor");
    });

The Brush

The brush effect is created by changing the background color of the blocks. This effect is triggered when the user both clicks and drags the mouse. Once the mouse is released the effect will stop.

The variable brush_color sets the color which the blocks will change to. The default color is gray (#CCC) and can be changed to anything you wish.

Below you can see the jQuery which creates the brush effect (with comments) :

    /*Set the var 'active' to yes when a user clicks the mouse down*/
    $('.paint_box').mousedown(function () {
        active = 'yes';
    });
    $('.paint_box').mouseup(function () {
        active = '';
    });
    /*Start the brush effect once the user hovers over the canvas*/
    $('.paint_box .block').mouseover(function () {
        /*If the user has cliked the mouse down then cahnge the div background color on hover*/
        if (active == 'yes') {
            /*Check if the user has selected the big brush.*/
            if (big_brush == '') {
                $(this).css({
                    'background-color': brush_color
                });
                /*If the user has selected the big brush then change the color of the div's neighbour also.*/
            } else {
                $(this).css({
                    'background-color': brush_color
                });
                $(this).next('div').css({
                    'background-color': brush_color
                });
            }
        }
    });

Changing brush size

To change the brush size the user can click on a link with the id big :

    <a href="#" id="big"> Switch to big brush. </a>

Once this is clicked it will set the var big_brush to yes :

$('#big').click(function () {
        if (big_brush == 'yes') {
            $(this).html('Switch to big brush');
            big_brush = '';
        } else {
            $(this).html('Switch to small brush');
            big_brush = 'yes';
        }
        return false;
    });

When the var big_brush is set to yes the brush effect will result in two blocks being highlighted rather than one. This is done using the jQuery next() function and can be seen below :

                $(this).next('div').css({
                    'background-color': brush_color
                });

Finished….

That’s about it. To get a greater understand I would highly recommend having a look at the demo and downloading the source files.

See The Demo.

Dave