Click here to Skip to main content
13,088,299 members (40,007 online)
Click here to Skip to main content
Add your own
alternative version


2 bookmarked
Posted 15 Jun 2014

Free-Hand Drawing Application

, 15 Jun 2014
Rate this:
Please Sign up or sign in to vote.
It is a JavaScript based application for drawing basic free-hand shapes, logos and drawings.


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.



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);
	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.


case 1:
        cg.bgColor = 'RED';
case 2:
        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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

You may also be interested in...


Comments and Discussions

GeneralVery nice idea.... Pin
Anoop_Ravindran16-Jun-14 20:03
memberAnoop_Ravindran16-Jun-14 20:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170813.1 | Last Updated 16 Jun 2014
Article Copyright 2014 by Garvit Arya
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid