Free-Hand Drawing Application

• Download GaryPaint_app.zip - 787 B

Introduction

This JavaScript based application is for drawing basic free hand shapes, logos and drawings.

In this the Canvas area is divided into number of Square boxes.

It is based on simple Array of Boolean flags for coloring a square and inverting it back using Mouse Pointer.

Background

To carry on with this tutorial, you’ll need to know a little about HTML and JavaScript,

What's in the Code

You can Download Complete Code from the link on Top.

Here I am explaining just the most significant lines only.

There are two functions used in this program:

function paintpictopanel()

Its purpose is to record mouse movement and to paint the boxes accordingly.

function cClick(cg,a,b)

Its purpose is to check whether mouse button is clicked or not on a specific panel/box.

It takes 3 parameters:

         cg: Get the value of calling location using this pointer.

         a: Index of row of matrix

         b: index of coloumn of matrix

var x = new Array(15);
for(i=0;i<=15;i++)
{
	x[i]= new Array(15);
}

This shows that the canvas is a 2D matrix consisting of 15 x 15 squares.

The most important syntax lines are:

for(i=0;i<15;i++)
{
 spictopanel+='<tr>';
 for(j=0;j<15;j++)
 {
  spictopanel+='<td onmousedown="paint=1;cClick(this,'+i+','+j+');" onmousemove="cClick(this,'+i+','+j+')" onmouseup="paint=0;" id="c['+i+']['+j+']"></td>';
 }
 spictopanel+='</tr>';
} 

These lines keeps a record of mouse pointer location and its relative movement in UP and DOWN direction and calls cClick( ) function on every move of Mouse Pointer to check if button is clicked or not.

case 1:
        cg.bgColor = 'RED';
        x[a][b]=1;
        break;
case 2:
        cg.bgColor = '';
        x[a][b]=0;
        document.oncontextmenu=new Function('return false');
        break; 

Whenever Left button of mouse is clicked over a Square box '1' is saved in array at corresponding index location and hence thatbox is painted in Red colour on screen.

If Right button is pressed when the box is already colored then it inverts back its color by replacing '1' by '0' in the array.

Points of Interest

You can give this app more Realistic effect by removing the Grid lines. For that just change table border="1" by table border="0" in following line:

spictopanel='<table border="1" width="450" height="450" style="border-collapse:collapse;">'; 

Also you can make more accurate drawing by increasing Matrix size to something like 150 x 150 etc. You need to adjust the counter of for loops accordingly. But Don't exceed the size by 500 x 500 as it will lead to slow response of browser.

You can Design cool Icons for files or Logos for your sites using this app.