// Fig. 13.4: draw.js // A simple drawing program. // initialization function to insert cells into the table

function createCanvas() { var side = 100; var tbody = document.getElementById( "tablebody") ;

for (var i = 0; i

for ( var j = 0; j < side; ++j) { var cell = document.createElement( "td "); row.appendChild( cell ); }//end for

tbody.appendChild( row ); } // end for

//register mousemove listener for the table document.getElementById( "canvas" ).addEventListener( "mousemove", processMouseMove, false); } // end function createCanvas

// processes the onmousemove event function processMouseMove( e ) { if ( e.target.tagName.toLowerCase() == "td" ) { // turn the cell blue if the Ctrl key is pressed if ( e.ctrlKey ) { e.target.setAttribute( "class", "blue" ); }// end if

// turn the cell red if the Shift key is pressed if ( e.shiftKey ) { e.target.setAttribute( "class", "red" ); }// end if }// end if }// end function processMouseMove

window.addEventListener( "load", createCanvas, false );

Hold Ctrl (or Control) to draw blue. Hold Shift to draw red.

Add a button to your program from Exercise 13.3 to erase the entire drawing window. Add an erase feature to the drawing program in Fig. 13.3. Try setting the background colorof the table cell over which the mouse moved to white when the Alt key is pressed