Crossbrowser HTML5 canvas drawing for PhoneGap

StuartProgramming Blog

While making a drawable HTML5 canvas overlay for my PhoneGap application, the testing version works just fine in my desktop chrome, but did not work when deployed.  Of course, this is the event position nightmare rearing its ugly head yet again.  Here is is, my cross browser PhoneGap drawing canvas solution for web and mobile.

Find the existing annotation canvas on the page and update its position to match that of the frame holding it. This is because the frame may have been resized when browser size changed
 

$("#annotationscanvas").css('width', $("#" + dataframeID).css('width') );
$("#annotationscanvas").attr('width', $("#" + dataframeID).css('width') );
$("#annotationscanvas").css('height', $("#" + dataframeID).css('height') );
$("#annotationscanvas").attr('height', $("#" + dataframeID).css('height') );
$("#annotationscanvas").css('left', $("#" + dataframeID).css('left') );
$("#annotationscanvas").attr('left', $("#" + dataframeID).css('left') );
$("#annotationscanvas").css('top', $("#" + dataframeID).css('top') );
$("#annotationscanvas").attr('top', $("#" + dataframeID).css('top') );
$("#annotationscanvas").css('background-color', "red");
canvasDiv = document.getElementById('annotationscanvas');
canvasDiv.addEventListener("mousemove", function (e) {
   performScreenAction('move', e)
}, false);
canvasDiv.addEventListener("touchmove", function (e) {
   performScreenAction('move', e)
}, false);
canvasDiv.addEventListener("mousedown", function (e) {
   performScreenAction('down', e)
}, false);
canvasDiv.addEventListener("touchstart", function (e) {
   performScreenAction('down', e)
}, false);
canvasDiv.addEventListener("mouseup", function (e) {
   performScreenAction('up', e)
}, false);
canvasDiv.addEventListener("touchend", function (e) {
   performScreenAction('up', e)
}, false);
canvasDiv.addEventListener("mouseout", function (e) {
   performScreenAction('out', e)
}, false);
ctx = canvasDiv.getContext('2d');

Then the action functions

function getCoordinateFromEventCrossBrowser(e, which) {
	var retval = 0;
	if (!e) var e = window.event;
	if (which.toUpperCase()=="X") {
		if (e.pageX) {
			retval = e.pageX;
		}
		else if (e.clientX) {
			retval = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		}
	}
	else if (which.toUpperCase()=="Y") {
		if (e.pageY) {
			retval = e.pageY;
		}
		else if (e.clientY) {
			retval =  e.clientY + document.body.scrollLeft + document.documentElement.scrollLeft;
		}
	}
	return retval;
}

function performScreenAction(res, e) {
	$("#status").val("action: " + res + "  x:" + getCoordinateFromEventCrossBrowser(e,"X") + "  y:" + getCoordinateFromEventCrossBrowser(e,"Y"));
	if (res == 'down') {
		prevX = currX;
		prevY = currY;
		currX = getCoordinateFromEventCrossBrowser(e,"X") - canvasDiv.offsetLeft;
		currY =  getCoordinateFromEventCrossBrowser(e,"Y") - canvasDiv.offsetTop - $(".bar-header").css('height').replace("%","").replace("px","");

		flag = true;
		dot_flag = true;
		if (dot_flag) {
			ctx.beginPath();
			ctx.fillStyle = "black";
			ctx.fillRect(currX, currY, 2, 2);
			ctx.closePath();
			dot_flag = false;
		}
	}
	if (res == 'up' || res == "out") {
		flag = false;
	}
	if (res == 'move') {
		if (flag) {
			prevX = currX;
			prevY = currY;
			currX = getCoordinateFromEventCrossBrowser(e,"X") - canvasDiv.offsetLeft;
			currY =  getCoordinateFromEventCrossBrowser(e,"Y") - canvasDiv.offsetTop - $(".bar-header").css('height').replace("%","").replace("px","");
			draw();
		}
	}
}
function draw() {
	ctx.beginPath();
	ctx.moveTo(prevX, prevY);
	ctx.lineTo(currX, currY);
	ctx.strokeStyle = "black";
	ctx.lineWidth = 3.0;
	ctx.stroke();
	ctx.closePath();
}
StuartCrossbrowser HTML5 canvas drawing for PhoneGap