var currentx = 350;
	var currenty = 350;
	var ltArrow = 37;
	var upArrow = 38;
	var rtArrow = 39;
	var dwArrow = 40;
	var size = 50;

	
function keyHit(evt) {
	var oCanvas = document.getElementById('oCanvas');
	var oCtx = oCanvas.getContext('2d');
	var thisKey;
	if (evt) {
		thisKey = evt.which;
	}
	else {
		thisKey = window.event.keyCode;
	}
	switch(thisKey){
		case ltArrow:
			currentx -= size;
			if(currentx<0){currentx = 0;}
			oCtx.fillRect(currentx, currenty, size, size);
			break;
		case rtArrow:
			currentx += size;
			if(currentx>800-size){currentx = 800-size;}
			oCtx.fillRect(currentx, currenty, size, size);
			break;
		case upArrow:
			currenty -= size;
			if(currenty<0){currenty = 0;}
			oCtx.fillRect(currentx, currenty, size, size);
			break;
		case dwArrow:
			currenty += size;
			if(currenty>800-size){currenty=800-size;}
			oCtx.fillRect(currentx, currenty, size, size);
			break;
		default:
			break;
	}
return False;
}

function resetSize(){
	var newLoc = document.getElementById("size");
	newLoc.blur();
	var newSize = newLoc.options[newLoc.selectedIndex].value;
	size = parseInt(newSize);
}

function resetColor(){
	var newLoca = document.getElementById("color");
	newLoca.blur();
	var newColor = newLoca.options[newLoca.selectedIndex].value;
	var oCanvas = document.getElementById('oCanvas');
	var oCtx = oCanvas.getContext('2d');
	oCtx.fillStyle = newColor;
}
	
window.onload = init;

function init(){
	var oCanvas = document.getElementById('oCanvas');
	var iWidth = oCanvas.width;
	var iHeight = oCanvas.height;
	var oCtx = oCanvas.getContext('2d');
	var iWidth = oCanvas.width;
	var iHeight = oCanvas.height;
	oCtx.fillStyle = "rgb(0,0,255)";
	oCtx.fillRect(currentx,currenty, 50, 50);
	document.onkeydown = keyHit;
	document.getElementById("size").selectedIndex = 4;
	document.getElementById("size").onchange = resetSize;
	document.getElementById("color").selectedIndex = 3;
	document.getElementById("color").onchange = resetColor;
	
	function showDownloadText() {
		document.getElementById("buttoncontainer").style.display = "none";
		document.getElementById("textdownload").style.display = "block";
	}

	function hideDownloadText() {
		document.getElementById("buttoncontainer").style.display = "block";
		document.getElementById("textdownload").style.display = "none";
	}

	function convertCanvas(strType) {
		if (strType == "PNG")
			var oImg = Canvas2Image.saveAsPNG(oCanvas, true);
		if (strType == "BMP")
			var oImg = Canvas2Image.saveAsBMP(oCanvas, true);
		if (strType == "JPEG")
			var oImg = Canvas2Image.saveAsJPEG(oCanvas, true);

		if (!oImg) {
			alert("Sorry, this browser is not capable of saving " + strType + " files!");
			return false;
		}

		oImg.id = "canvasimage";

		oImg.style.border = oCanvas.style.border;
		oCanvas.parentNode.replaceChild(oImg, oCanvas);

		showDownloadText();
	}

	function saveCanvas(pCanvas, strType) {
		var bRes = false;
		if (strType == "PNG")
			bRes = Canvas2Image.saveAsPNG(oCanvas);
		if (strType == "BMP")
			bRes = Canvas2Image.saveAsBMP(oCanvas);
		if (strType == "JPEG")
			bRes = Canvas2Image.saveAsJPEG(oCanvas);

		if (!bRes) {
			alert("Sorry, this browser is not capable of saving " + strType + " files!");
			return false;
		}
	}

	//document.getElementById("savepngbtn").onclick = function() {saveCanvas(oCanvas, "PNG");	}
	//document.getElementById("savebmpbtn").onclick = function() {saveCanvas(oCanvas, "BMP");	}
	//document.getElementById("savejpegbtn").onclick = function() {saveCanvas(oCanvas, "JPEG");}

	document.getElementById("convertpngbtn").onclick = function() {convertCanvas("PNG");}
	//document.getElementById("convertbmpbtn").onclick = function() {convertCanvas("BMP");}
	document.getElementById("convertjpegbtn").onclick = function() {convertCanvas("JPEG");}

	document.getElementById("resetbtn").onclick = function() {var oImg = document.getElementById("canvasimage");oImg.parentNode.replaceChild(oCanvas, oImg);
		hideDownloadText();	}
	}
2
Contributors
2
Replies
3
Views
5 Years
Discussion Span
Last Post by anilashanbhag
0

Nice job. It would be better if there is indication of current cursor position on the canvas. Something different from background color.

0

I did add a tracer to keep track of the current position but yes working on adding current position.

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.