Create Simple Paint Canvas using JavaScript ~ Web Speaks

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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WebSpeaks.in</title>
</head>

<body>

<table id="main" align="center">
 <tr valign="top">
  <td>
   <table id="toolbar" width="100%">
    <tr>
     <td>
      <table width="100%">
       <tr><td colspan="4">Select Color</td></tr>
       <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>
       </tr>
       <tr>
        <td class="colorbox c_00FF00"></td>
        <td class="colorbox c_FF0000"></td>
        <td class="colorbox c_FFFFFF"></td>
        <td class="colorbox c_000000"></td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
  <td>
   <table id="canvas" class="canvas" align="center">
    <tbody id="tablebody">
     <tr>
      <th class="key" colspan="200">Press <tt>ctrl</tt> and move your mouse to draw.</th>
     </tr>
    </tbody>
   </table>
  </td>
 </tr>
</table>
</body>
</html>

JavaScript Code

<script type="text/javascript">
<!--

var color = 'black';
var j = jQuery.noConflict();
j(document).ready(function(){

 createCanvas();

 j('.colorbox').click(function(){
  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;
    row.appendChild(cell);
   }
   tbody.appendChild(row);
  }
 }

 function processMouseMove(e)
 {
  //get the event object from IE
  if(!e)
   var e = window.event;
  
  if(e.ctrlKey)
   this.style.backgroundColor = color;
 }
 
});
-->
</script>

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;}

Create Simple Paint Canvas using JavaScript

HTML Markup

JavaScript Code

CSS Code

2 comments