Drawing with JavaScript

This post shows how to implement simple JavaScript drawing. After page is loaded, JavaScript will generate HTML table and attach onMouseDown and onMouseOver event handlers to the each table cell. When user clicks the left mouse button and move mouse pointer over table cell, table cell will change background-color property to the selected color. Please try ...

Here you can see complete JavaScript source code. If you cut out comments source will be only 40 lines long.

var color   = 'red'; // default color
var columns = 77;    // number of colums (X)
var rows    = 50;    // number of rows (Y)
var mouse   = 0;     // pressed mouse button

// register onLoad event with anonymous function
window.onload = function (){
	table_create(); // create HTML table
	table_events(); // attach event on table cells
	// disable drag event for IE
	document.body.ondragstart = function(e){return false}
	// attach event handlers for onMouseDown and onMouseUp on drawing_table div element
	document.getElementById('drawing_table').onmousedown = mousedown;
	document.getElementById('drawing_table').onmouseup   = function(e){mouse = 0}
}

// onMouseDown handler (attached to drawing_table div and td elements)
function mousedown(e){
	// define event
	var evt = e || window.event;
	// needed for FF to disable dragging
	if (evt.preventDefault) e.preventDefault();
	// set pressed mouse button
	if (evt.which) mouse = evt.which;
	else           mouse = evt.button;
	// colorize pixel on mousedown event for TD element
	if (this.tagName == 'TD' && mouse == 1) this.style.backgroundColor = color;
}

// create table HTML and attach to the div container
function table_create(){
	var tbl = ''; // initialize table string
	// open loops to create table rows and table cells
	for (var i=0; i<rows; i++){
		tbl = tbl + '<tr>';
		for (var j=0; j<columns; j++)	tbl = tbl + '<td></td>';
		tbl = tbl + '</tr>\n';
	}
	// get reference to the drawing table div and attach created table
	var div = document.getElementById('drawing_table');
	div.innerHTML = '<table cellspacing="0" cellpadding="0">' + tbl + '</table>';
}

// add events to table cells
function table_events(){
	// collect table cells from the drawing_table div element
	var td = document.getElementById('drawing_table').getElementsByTagName('td');
	// attach onMouseDown and onMouseOver event for collected table cells
	for (var i=0; i<td.length; i++){
		td[i].onmousedown = mousedown;
		// colorize table cell if left mouse button is pressed
		td[i].onmouseover = function (e){if (mouse == 1) this.style.backgroundColor = color}
	}
}

// set color (input parameter is the reference of the colored table cell)
function set_color(obj){
	color = obj.style.backgroundColor;
	var tbl = document.getElementById('drawing_table').firstChild;
	tbl.style.borderColor = color;
}

Example is pretty useless and I'm not sure you will use it for some serious applications, but it's a good demonstration of used JavaScript techniques and some points to note:

1. Border conflict resolution
If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table.

Means, I have to set 2px border instead of 1px for table border because FF didn'tt show table border. OK, than I removed border-collapse:collapse and FF displayed border, but unfortunately that "disturbed" IE and table cell borders disappeared in IE. Finally, when I set table border to 2px (which is different to 1px of table cell border), both browsers displayed table border and table cell border.

If you want to read more - www.w3.org/TR/CSS21/tables.html#border-conflict-resolution

2. table.innerHTML is read-only in IE6
The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.

So I made a workaround and generated complete HTML table instead to set table.innerHTML property. Please see table_create() function.

If you want to read more - msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

3. How to disable drag event
I have to disable drag event for IE and FF. In IE was enough to return false in body.ondragstart, while in FF I should preventDefault() method. preventDefault cancels the event (if it is cancelable), without stopping further propagation of the event.

4. Bypass wpautop for <table>, <tr> and <td> tags
This JavaScript example is saved as WordPress post. Nothing strange, but when post comes from the database, wpautop function filters the content and puts newline after <table>, <tr> and <td>. This feature breaks JavaScript code - please see table_create() function. The solution was to write tags in upper case because preg_replace in formatting.php searches for tags in lower case.

This entry was posted on Thursday, 30.04.2009. at 15:15and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.