/draw.js

## draw.js
/* © 2009 ROBO Design
 * http://www.robodesign.ro
 */

// Keep everything in anonymous function, called on window load.
if(window.addEventListener) {
window.addEventListener('load', function () {
  var canvas, context, tool;

  function init () {
    // Find the canvas element.
    canvas = document.getElementById('imageView');
    if (!canvas) {
      alert('Error: I cannot find the canvas element!');
      return;
    }

    if (!canvas.getContext) {
      alert('Error: no canvas.getContext!');
      return;
    }

    // Get the 2D canvas context.
    context = canvas.getContext('2d');
    if (!context) {
      alert('Error: failed to getContext!');
      return;
    }

    // Pencil tool instance.
    tool = new tool_pencil();

    // Attach the mousedown, mousemove and mouseup event listeners.
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);
  }

  // This painting tool works like a drawing pencil which tracks the mouse
  // movements.
  function tool_pencil () {
    var tool = this;
    this.started = false;

    // This is called when you start holding down the mouse button.
    // This starts the pencil drawing.
    this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
		context.lineWidth   = 10;
        tool.started = true;
    };

    // This function is called every time you move the mouse. Obviously, it only
    // draws if the tool.started state is set to true (when you are holding down
    // the mouse button).
    this.mousemove = function (ev) {
      if (tool.started) {
        context.lineTo(ev._x, ev._y);
        context.stroke();
      }
    };

    // This is called when you release the mouse button.
    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
      }
    };
  }

  // The general-purpose event handler. This function just determines the mouse
  // position relative to the canvas element.
  function ev_canvas (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

    // Call the event handler of the tool.
    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
  }

  init();

}, false); }

// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Ironing Maiden: Web Edition</title>
    <style type="text/css"><!--
      #container { position: relative; }
      #imageView { border: 1px solid #000; }
    --></style>
  </head>
  <body>
    <p>Hold down the mouse button to draw in the rectangle below.</p>
    <div id="container">
      <canvas id="imageView" width="800" height="600">
		<p>The canvas element is not supported in your browser.</p>
      </canvas>
    </div>
    <script type="text/javascript" src="draw.js"></script>
      </body>
</html>
	/* © 2009 ROBO Design
	* http://www.robodesign.ro
	*/

	// Keep everything in anonymous function, called on window load.
	if(window.addEventListener) {
	window.addEventListener('load', function () {
	var canvas, context, tool;

	function init () {
	// Find the canvas element.
	canvas = document.getElementById('imageView');
	if (!canvas) {
	alert('Error: I cannot find the canvas element!');
	return;
	}

	if (!canvas.getContext) {
	alert('Error: no canvas.getContext!');
	return;
	}

	// Get the 2D canvas context.
	context = canvas.getContext('2d');
	if (!context) {
	alert('Error: failed to getContext!');
	return;
	}

	// Pencil tool instance.
	tool = new tool_pencil();

	// Attach the mousedown, mousemove and mouseup event listeners.
	canvas.addEventListener('mousedown', ev_canvas, false);
	canvas.addEventListener('mousemove', ev_canvas, false);
	canvas.addEventListener('mouseup', ev_canvas, false);
	}

	// This painting tool works like a drawing pencil which tracks the mouse
	// movements.
	function tool_pencil () {
	var tool = this;
	this.started = false;

	// This is called when you start holding down the mouse button.
	// This starts the pencil drawing.
	this.mousedown = function (ev) {
	context.beginPath();
	context.moveTo(ev._x, ev._y);
	context.lineWidth = 10;
	tool.started = true;
	};

	// This function is called every time you move the mouse. Obviously, it only
	// draws if the tool.started state is set to true (when you are holding down
	// the mouse button).
	this.mousemove = function (ev) {
	if (tool.started) {
	context.lineTo(ev._x, ev._y);
	context.stroke();
	}
	};

	// This is called when you release the mouse button.
	this.mouseup = function (ev) {
	if (tool.started) {
	tool.mousemove(ev);
	tool.started = false;
	}
	};
	}

	// The general-purpose event handler. This function just determines the mouse
	// position relative to the canvas element.
	function ev_canvas (ev) {
	if (ev.layerX \|\| ev.layerX == 0) { // Firefox
	ev._x = ev.layerX;
	ev._y = ev.layerY;
	} else if (ev.offsetX \|\| ev.offsetX == 0) { // Opera
	ev._x = ev.offsetX;
	ev._y = ev.offsetY;
	}

	// Call the event handler of the tool.
	var func = tool[ev.type];
	if (func) {
	func(ev);
	}
	}

	init();

	}, false); }

	// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Ironing Maiden: Web Edition</title>
	<style type="text/css"><!--
	#container { position: relative; }
	#imageView { border: 1px solid #000; }
	--></style>
	</head>
	<body>
	<p>Hold down the mouse button to draw in the rectangle below.</p>
	<div id="container">
	<canvas id="imageView" width="800" height="600">
	<p>The canvas element is not supported in your browser.</p>
	</canvas>
	</div>
	<script type="text/javascript" src="draw.js"></script>
	</body>
	</html>