Sunday, February 6, 2011

Create Simple Paint Canvas using JavaScript


JavaScript can be a fun for you if used creatively. Here I have tried to create use JavaScript for some fun. This time I have created simple canvas for painting using jQuery and basic JavaScript. The concept is very simple. I have just created a grid of small 'td' elements iside a table and on mousemove, just change the background color of the 'td'. To add some spice, I have also added to color selection facility in the simple paint canvas. So paint and enjoy the JSCanvas...

Live Demo Download Script

HTML Markup

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">


<table id="main" align="center">
 <tr valign="top">
   <table id="toolbar" width="100%">
      <table width="100%">
       <tr><td colspan="4">Select Color</td></tr>
        <td class="colorbox c_FF00FF"></td>
        <td class="colorbox c_00FFFF"></td>
        <td class="colorbox c_FFFF00"></td>
        <td class="colorbox c_0000FF"></td>
        <td class="colorbox c_00FF00"></td>
        <td class="colorbox c_FF0000"></td>
        <td class="colorbox c_FFFFFF"></td>
        <td class="colorbox c_000000"></td>
   <table id="canvas" class="canvas" align="center">
    <tbody id="tablebody">
      <th class="key" colspan="200">Press <tt>ctrl</tt> and move your mouse to draw.</th>

JavaScript Code

<script type="text/javascript">

var color = 'black';
var j = jQuery.noConflict();


  color = j(this).css('background-color');

 function createCanvas()
  var side = 200;
  var tbody = document.getElementById("tablebody");
  for(var i=0; i<side; i++)
   var row = document.createElement("tr");
   for(var j=0; j<side; j++)
    var cell = document.createElement("td");
    cell.onmousemove = processMouseMove;

 function processMouseMove(e)
  //get the event object from IE
   var e = window.event;
  if(e.ctrlKey) = color;

CSS Code

#canvas{width:100px; border:1px solid #999999; border-collapse:collapse;}
td{width:1px; height:1px;}
th.key{font-family:Arial, Helvetica, sans-serif; font-size:12px; border-bottom:1px solid #999999;}
#toolbar{width:100px; border:1px solid #999999; border-collapse:collapse;}
td.colorbox{width:20px; height:20px; margin:2px; border:1px solid #999999;}
.c_FF00FF{ background-color:#FF00FF;}
.c_00FFFF{ background-color:#00FFFF;}
.c_FFFF00{ background-color:#FFFF00;}
.c_0000FF{ background-color:#0000FF;}
.c_00FF00{ background-color:#00FF00;}
.c_FF0000{ background-color:#FF0000;}
.c_FFFFFF{ background-color:#FFFFFF;}
.c_000000{ background-color:#000000;}

Written by

Arvind is a web developer, programmer and blogger. He has expertise in PHP, Magento, WordPress, jQuery, JavaScript, HTML5 and CSS3. He loves to develop good looking websites with strong backend.


  1. It's really nice!
    Do you think there's a way to save the drawings?

    Thank you very much!

  2. omg
    use that for better appearance

    ctx.lineJoin = "round";
    ctx.lineCap = "round";


We would love to hear from you...


© 2014 Web Speaks . All rights resevered. Designed by Templateism