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.
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:
Its purpose is to record mouse movement and to paint the boxes accordingly.
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);
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:
spictopanel+='<td onmousedown="paint=1;cClick(this,'+i+','+j+');" onmousemove="cClick(this,'+i+','+j+')" onmouseup="paint=0;" id="c['+i+']['+j+']"></td>';
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.
cg.bgColor = 'RED';
cg.bgColor = '';
document.oncontextmenu=new Function('return false');
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.