handling keyboard event using JQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development

you can download Jquery from here

for keyboard event visit this link

Below is a working example in which you can move your image left/right or up/down using wasd Keys. hope you enjoy it

<!DOCTYPE HTML>
<html>
    <head>
		<script src="js/jquery-1.7.1.js"></script>
        <script>
	var canvas;
	var context;
	var destX = 10;
	var destY = 100;
	var imageLoaded = false;
	var imageObj = new Image();
	var x_move = 0;
	var y_move = 0;
	var speed = 2
        window.onload = function(){
		canvas = document.getElementById("myCanvas");
		context = canvas.getContext("2d");
		// onload handler
		imageObj.onload = function(){
		setInterval(render,17);
		};
		// loading request
		imageObj.src = "img/avatar.png";
		// 
		$(document).keydown(function(e){
		var code = (e.keyCode ? e.keyCode : e.which);
		switch(code){
		case 65: //this is left! (a)
		x_move--;
		break;
		case 68: //this is right (d)
		x_move++;
		break;
		case 87: //this is up! (w)
		y_move++;
		break;
		case 83: //this is down! (s)
		y_move--;
		break;
		}
		//	alert(code);
		});

		//$(document).keyup(function(e){
		//var code = (e.keyCode ? e.keyCode : e.which);
		//alert(code);
		//});

		function render()
		{
			destX = destX + x_move * speed;
			destY = destY + y_move * speed;
			canvas.width = canvas.width;
			context.drawImage(imageObj, destX, destY);
		}
		};
        </script>
    </head>
    <body>
	<canvas id="myCanvas" width="600" height="400"></canvas>
    </body>
</html>

 

Posted in HTML5 | Leave a comment

Loading an image and show in HTML5 canvas

Lets start our next javascript example, To test that everything is fine you can use alert for debugging purpose, if alert display its fine otherwise some issue with code

<!DOCTYPE HTML>
<html>
    <head>
        <script>

            window.onload = function(){
                alert("Everything Working fine");
            };

        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="400">
        </canvas>
    </body>
</html>

we can rewrite our javascript code in new js file and use it as below

window.onload = function(){
    alert("Everything Working fine");
};

and use in our html template as below

<!DOCTYPE HTML>
<html>
    <head>
        <script src="js/main.js">
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="400">
        </canvas>
    </body>
</html>

now replace alert function in our javascript with this code

// get canvas element reference
var canvas = document.getElementById("myCanvas");
// get context object
var context = canvas.getContext("2d");
// create image Object
var imageObj = new Image();
// create position variable
var destX = 50;
var destY = 100;
// onload handler
imageObj.onload = function(){
    context.drawImage(imageObj, destX, destY);
};
// loading request
imageObj.src = "img/avatar.png";

Now our image is attached to canvas isn’t simple

Posted in HTML5 | Tagged , , , , | Leave a comment

How to use HTML5 Canvas

Hi,

If you are an “Action Script” developer you can assume HTML5 canvas element as Graphics Class in which you can draw shapes (line, circle,rectangle) etc.

you can simply create canvas element by writing this code in your body tag

 <canvas id="myCanvas" width="400" height="400"> </canvas>

Canvas doesn’t provide any drawing abilities of its own, We use javascript to draw on it. To draw anything from javascript we have to access canvas, for accessing you can use

 var canvas = document.getElementById("myCanvas");

The getContext(“2d”) method return a built-in HTML5 object(context),which is used to draw paths, circles, characters, images etc using its methods

var context = canvas.getContext("2d");

now you have context you can draw a rectangle using this code

context.fillRect(50,50,100,25);

Full Code will be:

var canvas=document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(50,50,100,25);

Hurrey we created our first HTML5 code.

Here is a basic HTML5 template which we will use in next learning sessions

<!DOCTYPE HTML>
<html>
    <head>
        <script>

            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                // do stuff here
            };

        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="400">
        </canvas>
    </body>
</html>

i copied it from this site you will get most of the starting tutorial there, you can also start begin from here.

Posted in HTML5 | Tagged | Leave a comment

window.onload Whats it!

“window.onload” represent a event. This event occur when page finishes loading
Ex: window.onload = functionXYZ;

Here functionXYZ is the handler function to be called when the window load event fires.
this should be your initialization point for JavaScript code.

for more detail visit, this like sure teach something NEW.

Posted in HTML5 | Leave a comment