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 Bhardwaj

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


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.