1,105,295 Community Members

Keyboard Controlled Pixel Drawing

Member Avatar
(anilashanbhag)
Reputation Points: 0 [?]
Q&As Helped to Solve: 10 [?]
Skill Endorsements: 0 [?]
 
1
 

The script is used in my newest chrome app
https://chrome.google.com/webstore/developer/detail/bomkcodcgmbjjhogdjophonfhgpegoni/

Site:
http://codestrix.co.cc/pixels/

The above script is a good to get stated with HTML5 canvas.
Much of it is named so as to be self explanatory but any doubts you are more than welcome to post it here.

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();	}
	}
Member Avatar
Luckychap
Posting Pro in Training
451 posts since Aug 2006
Reputation Points: 68 [?]
Q&As Helped to Solve: 62 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
anilashanbhag
Junior Poster in Training
57 posts since Oct 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 10 [?]
Skill Endorsements: 0 [?]
 
0
 

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

You
Post:
Start New Discussion
View similar articles that have also been tagged: