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

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

2 thoughts on “Create Simple Paint Canvas using JavaScript

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

    Thank you very much!

Comments are closed.