html.html

     <canvas id=&#34;imageView&#34; width=&#34;400&#34; height=&#34;300&#34;>
        <p>Unfortunately, your browser is currently unsupported by our web 
        application.  We are sorry for the inconvenience. Please use one of the 
        supported browsers listed below, or draw the image you want using an 
        offline tool.</p>
        <p>Supported browsers: <a href=&#34;http://www.opera.com&#34;>Opera</a>, <a 
          href=&#34;http://www.mozilla.com&#34;>Firefox</a>, <a 
          href=&#34;http://www.apple.com/safari&#34;>Safari</a>, and <a 
          href=&#34;http://www.konqueror.org&#34;>Konqueror</a>.</p>
      </canvas>

Interaction.js

var eventMap = { 
   mousemove: "move",
   touchmove: "move",
   mousedown: "down",
   touchstart: "down",
   mouseup: "up",
   touchend: "up"
};

function init () {
  canvas = $('#drawn').get(0);
  c = canvas.getContext('2d');
  $('#drawn').parent().append($('<canvas id="temp" height="'+canvas.height+'" width="'+canvas.width+'"></canvas>'));
  d = $('#temp').get(0).getContext('2d');
  c.lineJoin = "round";
  c.lineCap = "round";
  c.strokeStyle = "#"+ghex;
  c.lineWidth = 1;
  d.lineJoin = "round";
  d.lineCap = "round";
  d.strokeStyle = c.strokeStyle;
  d.lineWidth = c.lineWidth;

//  c.setDims(x*cssScale[0], y*cssScale[1], w*cssScale[0], h*cssScale[1]);
  tool = new tools.pencil();
  $('#container canvas').bind('mousedown mousemove mouseup', mouse_Draw);
  $('#container canvas').bind('touchstart touchmove touchend', touch_Draw);
  
}

function mouse_Draw (e) {
  var pos = findPos(this);
  e._x = e.clientX - pos.x;
  e._y = e.clientY - pos.y;
  e._x = e._x*cssOffset.x;
  e._y = e._y*cssOffset.y;
  var func = tool[eventMap[e.type]];
  if (func) {
    func(e);      
  }
  
  if (eventMap[e.type] === "down"){
    down = true;
  } else if (eventMap[e.type]  === "up") {
    down = false;
    $('#'+liveID).html('<img src="'+$('#drawn').get(0).toDataURL()+'" height="80px" width="110px" alt="Live Slide"></img>');
  }
}

$(window).ready(function () {
  init();
});

tools.js

var tools = {}
//Type 1
tools.pencil = function () {
	var tool = this;
	tool.started = false;

	tool.down = function (e) {
		d.beginPath();
		d.moveTo(e._x, e._y);
		tool.started = true;
	};

	tool.move = function (e) {
		if (tool.started) {
			d.lineTo(e._x, e._y);
			d.stroke();
		}
	};

	tool.up = function (e) {
		if (tool.started) {
			tool.started = false;
		}
	};
}