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


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

Thank you very much!

use that for better appearance

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

We would love to hear from you...

back to top