HTML5 : Canvas with mouse interaction.

Here we are going to study about the creation of Canvas dynamically and the basic mouse interactivity with the Canvas elements.

The source files for this example is here for you to download and play.

We are going to use a separate sprite sheet and try to make the scene a little more interesting than the last one. I would say to download the source files and see the example for yourself to see what is it doing. Basically there is a scene on the background with 6 tables and a girl doing some experiment on third table. Towards the left top corner of the scene, there is another girl trying to do some magic with its magic wand. If you look at the code, the scene with the girl doing experiment is a straight forward drawing from the sprite sheet as we did that in last tutorial. The girl with the magic wand is drawn in a dynamically created Canvas. The code looks as below.

//creating canvas dynamically
canvasGirl=document.createElement('canvas'); 
canvasGirl.width=100; 
canvasGirl.height=100;
//get the context
contextGirl=canvasGirl.getContext('2d');
//customise canvas
canvasGirl.style.background='transparent';
canvasGirl.style.zIndex=5;
//add the canvas to the document
document.body.appendChild(canvasGirl);

The first thing is to create a new canvas with “createElement(‘canvas’)”. That will make a new canvas. Now we have to get the context to draw something on it. This is done with “getContext(’2d’)” as usual, nothing new here. And lastly, we have to add our newly created Canvas to the document and this is done with “document.body.appendChild(canvasGirl);” code. Thats beautiful. Everything else in the code is just configuring the canvas.
Once the canvas and context are available to us, we can do anything we are able to do to a Canvas. So the girl with the magic wand is drawn to the context of this Canvas element. The code looks as below.

resetContext(canvasGirl,contextGirl);
contextGirl.drawImage(photo, 108*counter+10, 900, 96, 64, 0, 0, 96, 64);

First we are resetting the Canvas, so as to draw new content on each timer. Since the girl with magic wand is actually an animation, we call the code above repeatedly on a timer event. And first we clear the context with our own function and then redraw an image from sprite sheet at the same place on the canvas, so as to make an animation. If you are following along with the previous tutorials then the reseting of context code should not be new to you, else the code looks as as below.

resetContext=function(canvasRef,contextRef){
	contextRef.clearRect(0,0,canvasRef.width,canvasRef.height);
};

All we have, are two layers of drawing and animation drawn from the same sprite sheet.
Lets do some mouse interactivity with these elements. The code looks as below.

//------------ adding mouse interaction --------------
$('#board_one').mouseup(function() {
  	alert('Canvas with Tables');
});
$(canvasGirl).mouseup(function() {
  	alert('Canvas with Girl, doing magic.');
});

The trick here is JQuery’s neat job. Just remember anything wrapped with $() will give a JQuery element of the same HTML element. So our dynamically created Canvas is made an JQuery element by

$(canvasGirl)

Notice that there is no ‘#’ before the name as it is before ‘board_one’, thats for the ‘board_one’ we are referring the HTML element with id ‘board_one’, while the other one we are creating dynamically in javascript and converting it to a JQuery equivalent.
Thats nice and if you have not done yet, please go ahead and click on the board to get an alert showing different message and if you click on the girl with magic wand, that will alert a different message.
This is quite simple and straight forward interactivity, but I think you got the point.
Happy coding :)

And yes, I made it to one month of continuous posting, highly influenced by Keith Peters. Though it was not all javascript and I missed some dates, but all in all, the number of posts in a month is achieved. I am quite happy about my effort and a big thanks to all of you, who read it.

HTML5 : Canvas and Context , code and hack! clear and reset.

In one of our previous tutorials, we have seen how Canvas element is reset. And we also know that its a hack but we can use that to our advantage so as to clear the whole drawing, which was previously drawn through code.
Now, lets see the actual API, which is available to us to clear the whole Context of the Canvas element. The code looks as below.

context.clearRect(topLeftX,topLeftY,width,height);

This actually gives us the ability to clear a rectangular part of the Context of the Canvas. For the whole context to be cleared, just pass on the Canvas width and height as below.

contextRef.clearRect(0,0,canvasRef.width,canvasRef.height);

That simply clears of the drawings from the context. The thing is its the context that is being cleared.
Now lets revisit the hack. the quick hack to clear everything from the Canvas. This is done by setting either height or width of the Canvas element itself. Even if its the same width and same height, but it resets the whole canvas, clears everything form it. So this hack works on Canvas element but the actual code to clear, works on the context of that canvas. The hack code looks as

canvasRef.width=canvasRef.width;
canvasRef.height=canvasRef.height;

If you look at the source code, you can find I have written two different functions to call, one using the actual API and one using the hack. The codes are here for the reference.

//resetting the width and height, it automatically resets the canvas
	//clear the board, quick and dirty, its a HACK!!
	resetCanvas = function (canvasRef){
		canvasRef.width=canvasRef.width;
		canvasRef.height=canvasRef.height;
	};

Now the clear context function is as below.

//clear the board
	resetContext=function(canvasRef,contextRef){
		contextRef.clearRect(0,0,canvasRef.width,canvasRef.height);
	};

Just to enforce the idea one more time, the clear function works on the Context object of the Canvas, while the reset hack works on the Canvas element itself.

Hope that clears the concept.

HTML5 : Drawing shapes in Canvas

I hope by now we have learned how to draw lines in HTML5 Canvas element. The very next thing is to draw some shapes.
To draw the rectangle the code looks like

context.strokeRect(leftTopX, leftTopY, rightButtomX, rightButtomY);

The above code will create a rectangle with only the outlines. If we want to fill the rectangle with color then the code will look as below.

context.fillRect(leftTopX, leftTopY, rightButtomX, rightButtomY);

In similar way to draw a circle we will use the command to draw an arc as below.

context.arc(x, y, radius, startAngle, endAngle, is_it_anticlockwise);
//example
context.arc(230, 90, 50, 0, Math.PI*2, false);

Now the concept is same as drawing a stroked circle or a filled as to call the stroke method or fill method.

context.beginPath(); // Start the path 
context.arc(230, 90, 50, 0, Math.PI*2, false); // Draw a circle 
context.closePath(); // Close the path 
//define style
context_one.fillStyle = "#F0F";
context_one.strokeStyle = "#FF0";
context_one.lineWidth   = 10;
//fill and stroke
context.fill(); // Fill the path
context.stroke();//stroke the path

The source files for this example is here for you to download and play with it.

HTML5 : Drawing lines on Canvas

Lets start drawing some lines in the Canvas. The point here is, it may feel like we are drawing in Bitmap, but actually its a vector drawing while its being drawn. But then once drawing is complete, it can not be modified directly. The Canvas does not remember any reference to the drawings we have already drawn. So the point to remember is its one time vector drawing. If at all we need to modify it, we have to redraw everything or may save everything inside our code.
The drawing is all javascript. The drawing itself is kind of two part process. First part is to draw the lines. The second part is making them visible. That means the first part draws in memory but not visible. Its only visible after we call the required methods to make them visible.
Lets dive into the code, yay.

canvas_one=document.getElementById('board_one');
context_one=canvas_one.getContext("2d");

We got the context. Now the drawing code comprises of

moveTo(xPosition,yPosition);
lineTo(xPosition,yPosition);

The first command ie; moveTo(xPos,yPos), takes the pen to the “xPos,yPos” position. The next command lineTo(xPos,yPos), draws a line from the pen position to the new position specified by “lineTo”. Thats all, the more number of these commands are called, the points get connected by a straight line. Till now we are only drawing but the are not visible yet.
Lets make the lines visible. These are done by

//define the pen
context_one.strokeStyle = "#000";
context_one.lineWidth   = 5;
//make the lines visible
context_one.stroke();

Thats beautiful. Now are lines are visible. All is well and good, but how to create new kind of lines, means how to create lines with different colour and thickness? This is simply done with

//beginPath() creates a new line
context_one.beginPath();

After this all we are going to do is moveTo and lineTo commands to draw and the stroke with a different pen.

The source files are here for you to download and test.

HTML5 : Some more details about Canvas

I think by now we are moving good on Canvas element and now its time to know some more basics about the canvas element which will get us up and running on the canvas.

Firstly the co-ordinate system. Well, the origin of the canvas element is at the top-left corner. The x-axis increases its value form left to right from the origin. The y-axis increases its value from top to bottom form the origin.

Now there is an important concept about Canvas element which can get in our way. That is the resetting of the Canvas element altogether. Resetting means, Canvas comes back to its initial stage, the default settings with which it has been created. And this happens when we set either width or height of the Canvas through our code. Well, we can use that to our advantage also. Suppose we have already drawn a lot of drawing on the Canvas and now we want to clear everything. Then we can just set the width and height of the canvas to its original width and height. Though that does not change the size of the Canvas itself, but it will reset the Canvas to its default state removing all the drawings. Lets say that again, even if we set the width and height of the Canvas element to its own width and height, it will reset the Canvas to its default. This can be an advantageous to us if we use it and at the same time it can be a disadvantageous to us if we overlook the effect.

HTML5 : Canvas, an introduction.

Getting started with the canvas on HTML5 is kind of diving right into the HTML5 world and forgetting anything of past of a web browser. I am not going to talk more about it here, rather I think by this time you already have known this. Instead we will jump into the canvas example right away.
Here is the source code of the files for you to download and run.
The HTML code looks as



	


		
		
		
	
	
		
Hello World.

We have added two canvas tags in our HTML document. These canvas tags are kind of actual Canvas of or a drawing board. Yes, now we have a proper drawing board in HTML. I have added two canvas tags so as to know that there is no restriction on the number of Canvas tags. Now lets look at the javascript code. It looks like

$.ready()
{
	//first canvas
	//var canvas_one=$('#board_one')[0];
	var canvas_one=document.getElementById('board_one');
	var context_one=canvas_one.getContext("2d");
	context_one.fillStyle = "#f00";
	context_one.fillRect(50, 25, 150, 100);
	//second canvas
	var canvas_two=$('#board_two')[0];
	var context_two=canvas_two.getContext("2d");
	context_two.fillStyle = "#0f0";
	context_two.fillRect(10, 10, 200, 50);
	//
	context_two.beginPath();
	context_two.arc(300,100,50,0,rads(360),false);
	context_two.closePath();
	//
	// Define some graphics attributes and draw the curves
	context_two.fillStyle = "#aaa";  // Gray fills
	context_two.strokeStyle = "blue"; // Stroke lines in blue
	context_two.lineWidth = 5;       // 5-pixel black (by default) lines
	context_two.fill();              // Fill the curves
	context_two.stroke();            // Stroke their outlines
	
	//experiement with first canvas
	context_one.strokeStyle = "blue"; // Stroke lines in blue
	context_one.fillStyle = "#aaa";
	context_one.fillRect(300, 50, 50, 100);
	//
	// A utility function to convert from degrees to radians
	function rads(x) { return Math.PI*x/180; }  
};

Just open up the HTML file in any web browser to see the drawings in action. And thats simple, is not it! Now we have two rectangles in first canvas and two shapes(one rectangle and a circle) in second canvas.
The important part here is to understand the drawing board or the Canvas in HTML. Well, the thing is first we get the canvas element in our javascript code.

var canvas_one=document.getElementById('board_one');

Now this is not the plane or not the slate where we are going to draw. To get the surface to draw, we have to get that with the code below

var context_one=canvas_one.getContext("2d");

This is known as context and can be a 3d context to draw 3d or 2d context to draw 2d. We are getting the 2d context object here known as CanvasRenderingContext2D object. The 3d context object is referred as “webgl” instead of “2d” in the “getContext()” method. WebGL is an API which is a javascript implementation of OpenGL. Yet, WebGL is a large and complicated API and it is suggested to use a third party library for the same. But all in all we got the idea.

To summarize it all,

  1. Add a canvas tag specifying width and height
  2. Get the canvas element in javascript
  3. Get the context forma the canvas
  4. Start drawing
  5. Enjoy :)

Hope that helps someone one out there.

javascript : Inheritence by prototype

Once we got the basic information and know how, of the “prototype” property of a constructor object, we need some code to test it. So here is another all in one page test for the “prototype” property.
We have 3 constructors and then the prototype property of the constructors are defined as another object. Basically, if 3 constructors namely A,B,C are present, prototype of A is defined as an object created by “new B()”, prototype of B is defined as an object created by “new C()”. There are 4 different properties in all the objects. But the relationship is now as below

A.prototype is new B(); 
B.prototype is new C()
//so the relation is as below
A -> B -> C

That means, “prototype” allows us to make a relation between the objects. We will see that in a moment. Now all the properties of all the objects can be accessed through the object created by “new A()”.
If you have not yet opened the all in one page test for this example, open it now. And click the buttons to see the properties accessed from one Object.

var ClassA=(function(){
	//------define-------
	var a,b,c,d,getA,getB,getC,getD,numberToBeAdded;
	//------configure------
	a='Property a';
	b=500;
	c='Property c';
	d='Property d';
	//numberToBeAdded=100;//prototype object can not access this property, instead the local property will be used
	this.numberToBeAdded=100;//With the use of "this" now its exposed to be accesed from its prototype object
	//------expose-------
	this.getA=function(){
		return a;
	}
	this.getB=function(){
		return b;
	}
	this.getC=function(){
		return c;
	}
	this.getD=function(){
		return d;
	}
	//
	/*
	this.getSum=function(userNumber){
		return userNumber+numberToBeAdded;
	}
	*/
});
//
var ClassB=(function(){
	//------define-------
	var e,f,g,h,getE,getF,getG,getH;
	//------configure------
	e='Property e';
	f=9;
	g='Property g';
	h='Property h';
	//numberToBeAdded=200;
	//------expose-------
	this.getE=function(){
		return e;
	}
	this.getF=function(){
		return f;
	}
	this.getG=function(){
		return g;
	}
	this.getH=function(){
		return h;
	}
	//
	/*
	this.getSum=function(userNumber){
		return userNumber+numberToBeAdded;
	}
	*/
});
//
var ClassC=(function(){
	//------define-------
	var i,j,k,l,getI,getJ,getK,getL,getSum,numberToBeAdded;
	//------configure------
	i='Property i';
	j=300;
	k='Property k';
	l='Property l';
	numberToBeAdded=300;//"this" exposes this number to be overriden by the object which will prototype ClassC(or this class)
	//------expose-------
	this.getI=function(){
		return i;
	}
	this.getJ=function(){
		return j;
	}
	this.getK=function(){
		return k;
	}
	this.getL=function(){
		return l;
	}
	//
	this.getSum=function(userNumber){
		//return userNumber+numberToBeAdded;
		return userNumber+this.numberToBeAdded;//using "this" will override the local property and use the property of the object which would be using this object as a prototype
	}
});

The code to use the prototype is defined as

//makes the object
var objC=new ClassC();
//makes the prototype magic
ClassB.prototype=objC;
ClassB.constructor=ClassB;
//makes the object
var objB=new ClassB();
//objB.constructor.prototype=objC;
//makes the prototype magic
ClassA.prototype=objB;
ClassA.constructor=ClassA;
var objA=new ClassA();

So how it works?!! This magic is simply possible by “prototype”. For example, if we are trying to access one property in an object created by “new A()” and the property is not present in the Object, then javascript engine will look for the property in the “prototype” object of “new A()” and that in our case is an object created by “new B()” and if the property is not found in it, it will search in the prototype property object defined for this object, that is in our case is an object created by “new C()”.

The code below shows, how we are accessing properties from the prototype object through the single object.

//calling own method
objA.getA();
//calling B's method
objA.getE();
//calling C's method
objA.getJ();

If you go through the code here, you must see that there is the use of the key word “this”. This is simply kind of saying that this property is accessible from outside. In Java or Actionscript kind of languages, its known as “public” variables. Remember that, whatever variables need to be exposed to outside, must be defined with the keyword “this”. Going through the code again will show you that, some properties are just defined with “var”, while some other are defined with “this”. Remember, “this” always points to the current object.

Now with these knowledge, we can very well override or reassign values to our objects, which are defined in the prototype object. That means, if some properties are defined in our “prototype” object and they are exposed or public variables, then we can again define the same variables in our Object and our object variables will be used for calculations. This is very interesting and sometimes get some time to understand too. Again, coming back to code, we have a function in our “prototype” object which adds some numeric value to another given number. Both the actual object and “prototype” object have got the value, which needs to be added. But if the prototype value is exposed with “this” then only the value inside function, which calls this variable with “this” will take actual value from the object not the value from the prototype! Thats because, “this” always refers to the current object.

Here is the source code for this example.

Hope that helps someone. Would love to listen comments, suggestions and insights, as I am still learning it.

javascript : prototype

Moving on with my study of javascript, the next thing is “prototype”. Before that, lets say it three times, “Everything in javascript is an Object“.

There are only 3 primitive datatypes in javascript! Though some refer as, there are 5 types, but all in all those are the only ones. These primitive data types are

string
numeric
boolean
//The other two are
null
undefined

Apart from these basic datatypes, everything else is an Object. Though there are predefined Objects in javascript with these primitive datatype names such as String,Number,Boolean,Null,Undefined respectively. Please refer this for a detailed understanding.
Well, the point here is everything is an Object in Javascript. Unlike other programming languages where a Class is needed to create an Object, Javascript comes with Objects from the beginning. The dynamic nature of the language allows us to do so many things in so many ways that there really needs an eye who can see the details, of how things are done.
We know from past tutorial that “prototype” is a property of an Object created with “new” keyword. What does this do? Well, this allows us to link Objects internally!! Lets take a pause and understand another very important lesson of javascript and object oriented programming in general.
In a Class based language(Java or Actionscript) it is thought as, “how to relate the Classes, so that something is possible?”, where in a dynamic language such as javascript, it is thought as “how to relate the Objects, so that something is possible?” Read it for a number of times so that you will get a hang of the metaphor and thought process difference, in mind.
So the point here is the same, we have to relate the Objects itself but not the Classes(Anyway, we do not have classes here in javascript but can fake them though).
Coming back to our “prototype”, its the property of an Object created through the use of “new”. This “prototype” property is also an Object in itself. To test this, let us refer our previous post, and the all in one page test. Go down to the “Understanding Javascript class.” box and click on the “what is prototype” button. The pop-up will say, its an Object. That’s good, lets move on and click on “prototype test” button, now it alerts “undefined” that means, “prototype” is an object but not yet defined! So lets define a prototype and call the same method again. First to assign an object to the “prototype” property click on “initiate with custom prototype” button. That will assign a custom object as the “prototype” property. Now click on the “prototype test” button again, and this time it will alert with some value, other than “undefined”.
Whoa!! Its that simple. Yes it is that simple and for the same reason many confuse with the concept. After all the world has become complicated to understand simple things :) :)

The source code of the example is here to download.
Happy coding.

javascript : Constructor

The confusion between a “function” and a “constructor” is always there. They may seem very similar from outside, but its the implementation that defines the difference. Actually its not even the function definition which is confusing, but its the concept and dynamism of the language itself.
First important thing to remember is everything in Javascript is an Object.
So anything that is Object can be functional. Now there are two ways we can create objects in javascript.
The basic and most used is the object literal with curly braces as

var myObj={
a:12,
b:"another string",
c:function(){}
};

Now if we want to access any thing of this object, the calls will go as below

myObj.a;
myObj.c();

That was quite straight forward for we are accessing an “object itself”.
Now lets see how we can create objects in another way.

var AnObject=function(){
this.a='A String value';
this.b=12345;
this.c=function(){};
this.d='Another String';
};

The above code is kind of a Class, that means it is not a class by any formal definition, but it is kind of a thing which makes objects. If one tries to access anything from it directly as

AnObject.a;
AnObject.c();

It will simply not work!! Why?! For its not an Object yet. To make an object out of it, we have to use “new” and then call it with a “()” like

var anO=new AnObject();
//now call the properties and methods as below
anO.a;
anO.c();

Thats simply because when we call this kind of object, or create objects in this kind with a “new” and a “()”, its called constructor.

varv anO=new AnObject();

Now this function call with a “new” is known as a constructor.
Apart from this difference there is a huge difference in terms of using “prototype” object of the constructor. The “prototype” itself is a huge topic, so its not explained here. The important thing here is to remember that any object which is created with a constructor has a “prototype” property but the objects, which are created with any other methods do not possess the “prototype” object.

javascript : An all in one test page :)

This took me some time to put a decent page online, where one can refer to some very basic concepts of Javascript. Now the page can be accessed here and the source code can be downloaded from this link.

I will go on putting the details of my learning in the coming posts, but for the time being if one needs to play around the codes, please download and start researching.

Keep in mind that every language has its own way of doing things and the more ignorant you become (at least pretend to become) about other languages while picking up one, the faster you will master the one you are studying.

The example and source files convey, how to make and use your own javascript library, how to make a reusable Object in javascript (i am not saying to make a Class here, but a reusable Object, there is a very big difference in those two), how to make a basic CSS3 usage of rounded corners, multiple shadows, custom fonts and text shadows.

Happy learning.