JavaBeat » Web 2.0 http://www.javabeat.net Java Technology News Mon, 13 May 2013 20:10:23 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 Canvas Tag in HTML5 http://www.javabeat.net/2011/07/canvas-tag-in-html5/ http://www.javabeat.net/2011/07/canvas-tag-in-html5/#comments Sun, 31 Jul 2011 23:36:53 +0000 krishnas http://www.javabeat.net/?p=2430 Connect to us ( @twitter | @facebook )

Introduction HTML5 is the version of HTML and XHTML that has rekindled the future of HTML and is treated as the future of the web technology. HTML5 originated with the cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) and has the capability to address the increasing [...]

]]> Connect to us ( @twitter | @facebook )

Introduction

HTML5 is the version of HTML and XHTML that has rekindled the future of HTML and is treated as the future of the web technology. HTML5 originated with the cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) and has the capability to address the increasing RIA demands. The new features like canvas, video, audio, local storage, web worker, web sockets etc have given HTML5 a real push in the market.

As HTML5 is still developing in leaps and bounce, support is still not available for the advanced features in certain browsers. Though modern browsers support most of the features, google chrome is the best among the available. The alarming issue yet to be resolved is the lack of support for HTML5 features in IE. It is expected that in the next release of the IE, more features will be supported.

Canvas

Canvas is one of the most discussed additions in HTML5.This feature allows to create dynamic effects in web pages without any external plug-in. Canvas creates a 2d drawing area where, images can be added, build graph, create animation etc using JavaScript functionality. Canvas tag is supported in all major browsers like Mozilla, Chrome, Safari, Opera etc

<Canvas> Element

Canvas element creates a rectangular portion in the webpage with co-ordinate system. Canvas element, like any other HTML5 element has DOM structure with its specific id attribute. There can be more than one canvas tag in a page. Each Canvas element can be clearly differentiated using id attribute. JavaScript should be used to draw images or build animation on Canvas.

Canvas element without any associated JavaScript code is completely empty. It does not have any border or content of its own.

1

<canvas id=“demoCanvas” width=“200” height=“200”></canvas>

Canvas is a container tag with three attributes. ‘Width’ and ‘Height’ attributes are used to fix the size of the available drawing area created by the element. Like any other element in HTML canvas also has the ‘ID’ attribute, which can be used to access the element using scripting language. All the attributes are optional and width and height can be set using DOM properties. If the size of the canvas is not set, it will occupy a default width of 300 pixels and height of 150 pixels. The text between the starting tag and end tag of canvas will be displayed on the browser if the browser does not support Canvas.

Rendering Context

The drawing surface canvas creates has one or more rendering context associated within and can be used for creating and manipulating the contents in canvas. Presently only 2d drawing context is available as 3d rendering context is still in experimental stages. Scripting languages should be used to access the context in order to draw on it. Rendering context of the canvas element can be accessed using the DOM method known as getContext().

1
2

var canvas = document.getElementById(‘demoCanvas’);  // get canvas DOM node 
	var ctx = canvas.getContext('2d');  //to access the drawing context

The canvas DOM node can be retrieved using the JavaScript method getElemntById(). Once the Canvas element is accessed, using the getContext() method the drawing context is accessed. The method getContext takes a parameter of type context. In the above example ’2d’ drawing context has been accessed.

The complete code of a sample HTML5 page using canvas is shown below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
	<head>
		<title>Canvas</title>
		<script type="text/javascript">
		function draw() {
			var canvas = document.getElementById("demoCanvas");
			if (canvas.getContext){
				var ctx = canvas.getContext('2d');
			} else {
				alert('Your browser does not support canvas!!');
			}
		}
		</script>
	</head>
	<body onload="draw()">
		<canvas id="demoCanvas" width="300" height="225“ ></canvas>
	</body>
	</html>

Drawing Shapes

Canvas is a two dimensional grid with the values of ‘X’ axis increasing towards the right and the values of ‘Y’ axis increasing towards the bottom edge. The co-ordinate points are used to position while drawing objects on the canvas. Rectangle is the only shape that can be drawn on the canvas. All other shapes are created through a combination in canvas. There are three different functions available for drawing rectangles.

1
2
3

fillRect(x,y,width,height) // Draws a filled rectangle from the specified coordinates
	strokeRect(x,y,width,height) // Draws a rectangular outline from the specified coordinates
	clearRect(x,y,width,height)  //Clears the specified area

All the three methods have four parameters, namely

  • X - x coordinate relative to origin
  • Y - y coordinate relative to origin
  • Width - width of the rectangle
  • Height - height of the rectangle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<head>
		<script type="text/javascript">
		function draw() {
			var canvas = document.getElementById("demoCanvas");
			if (canvas.getContext){
				var ctx = canvas.getContext('2d');
				ctx.fillRect(20,20,75,75);
				ctx.clearRect(40,40,50,50);
				ctx.strokeRect(10,10,100,100);
			} else {
				alert('Your browser does not support canvas!!');
			}
		}
		</script>
	</head>
	<body onload="draw()">
		<canvas id="demoCanvas" width="300" height="225“style="border; 5px green dashed" ></ canvas>
	</body>

Different types of path can be drawn in order to obtain complex shapes other than rectangle. The available functions are:-

  • beginPath()
    • beginPath() starts a new path or fresh path on the canvas.
  • closePath()
    • The method is used to draw a straight line from the starting point to the current point. It tries to close the shape.
  • stroke() and fill()
    • These methods are used to draw shapes on the canvas. stroke() method draws only an outline of the shape and the fill() method paints a solid shape. The two methods can be combined in order to obtain complex shapes.
  • moveTo()
    • This method doesn’t draw anything on the canvas. It is like lifting the pointer from one point to another.
    • The method takes two parameters, the coordinates of the new starting point
    • This method is very useful for drawing complex shapes in order to reach different co-ordinate points on the canvas
  • lineTo()
    • This method is used to draw straight lines
    • The method takes two parameters, the x and y coordinates of the end point of the line. The beginning point of the line will be the ending point of the previously drawn path. moveTo() method can be used to change the starting point to draw lines from different points
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script type="text/javascript">
	function draw() {
		var canvas = document.getElementById("demoCanvas");
		var ctx = canvas.getContext('2d');
		ctx.beginPath();
		ctx.moveTo(40,40);
		ctx.lineTo(100,40);
		ctx.lineTo(40,100);
		ctx.fill();
		ctx.beginPath();
		ctx.moveTo(30,30);
		ctx.lineTo(120,30);
		ctx.lineTo(30,120);
		ctx.lineTo(30,30);
		ctx.stroke();
	}
	</script>
	<body onload="draw()">
		<canvas id="demoCanvas" width="300" height="225“ ></canvas>
	</body>
  • arc()
    • This method is used to draw circles and curves. This is one of the methods that is used very often to draw shapes on canva.
    • This method takes five parameters:
      • x and y are the coordinates of the circle’s center
      • Radius is the radius of the circle or arc
      • The startAngle and endAngle parameters define the start and end points of the arc ,which are measured from the x axis. Angles in the arc function are measured in radians.
      • The anticlockwise parameter is a Boolean value. If true, the arc is drawn in anticlockwise direction, otherwise in clockwise direction.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

arc(x, y, radius, startAngle, endAngle, anticlockwise);
 
 
	<script type="text/javascript">
	function draw() {
		var canvas = document.getElementById("demoCanvas");
		var ctx = canvas.getContext('2d');
		for (var i=0;i<5;i++){
			for (var j=0;j<5;j++){
				ctx.beginPath();
				ctx.arc(20+j*15,20+i*15,10,0,Math.PI*2,true);
				ctx.stroke();
			}
		}
	}
	</script>
	<body onload="draw()">
		<canvas id="demoCanvas" width="300" height="225“ ></canvas>
	</body>

Colors can be set to different shapes in canvas using fillStyle() and strokeStyle() methods. fillStyle() is used to fill a shape with a specific colour and strokeStyle() to draw a border. Both fillStyle and strokeStyle have black as default value, if no colour is set.

1
2
3
4

//colour can be set in the following ways:
	ctx.fillStyle = “Red";  
	ctx.fillStyle = "#FFA810";  
	ctx.fillStyle = "rgb(205,0, 185)";

Images in Canvas

Canvas is a holding area even for images. Images can be added to any co-ordinate position on the canvas. drawImage() method is used to draw the image on the canvas at the specified coordinates using the co-ordinate system . The image object is created and passed as a parameter to the drawImage() method.

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
	function draw() {
		var canvas = document.getElementById("demoCanvas");
		var ctx = canvas.getContext('2d');
		var cat = new Image();
		cat.src = "car.png“;
		ctx.drawImage(cat,50,50);
	</script>
	<body onload="draw()">
		<canvas id="demoCanvas" width="300" height="225“ ></canvas>
	</body>

Conclusion

Canvas tag can be used to design games and complex dynamic effects in HTML5. In near future, with the canvas extending its support to 3d context drawing more and more dynamic effects can be generated. Presently there are games and websites which have made use of canvas extensively.

email
]]> http://www.javabeat.net/2011/07/canvas-tag-in-html5/feed/ 0 What is Web 2.0? http://www.javabeat.net/2008/09/what-is-web-2-0/ http://www.javabeat.net/2008/09/what-is-web-2-0/#comments Fri, 19 Sep 2008 13:01:52 +0000 JavaBeat http://www.javabeat.net/examples/?p=244 Connect to us ( @twitter | @facebook )

Web 2.0, a phrase is a cluster term for the new phase of World Wide Web, which was coined by O’Reilly and Media live International in 2003 and popularized by the first Web 2.0 conference in 2004. There is no certain definition of Web 2.0, even though; it stands for the transformation of the web [...]

]]> Connect to us ( @twitter | @facebook )

Web 2.0, a phrase is a cluster term for the new phase of World Wide Web, which was coined by O’Reilly and Media live International in 2003 and popularized by the first Web 2.0 conference in 2004. There is no certain definition of Web 2.0, even though; it stands for the transformation of the web into a full-fledged computing platform.

Web 2.0 is not a modified version of World Wide Web, but it is a different way to utilize Internet into web platform like weblogs, social book marking, wikis, podcasts, RSS feeds (and other forms of many-to-many publishing), social networking web, Web APIs, Web standards and online service provider. It is like open sourcing and genuine interactivity in which user can upload anything, download anything and can use the content according to its own wish. There is no restriction of more or less measure of content, uploading and downloading. All these are absolutely free.

According to ‘O’Reilly, the inventor of Web 2.0, “Web 2.0 is the business revolution in the computer industry caused by the move to the Internet as platform, and an attempt to understand the rules for success on that new platform”. So Web 2.0 is a new way of business via Internet. It’s really a new business tactic that is being used on the mass level across the world. The success of ‘YouTube’, ‘Orkut’, ‘MySpace’, ‘Google’, ‘live’, ‘Wikipedia’ and many more websites are the biggest examples of Web 2.0.

As we have already mentioned that Web 2.0 has not any specific definition. Many users have defined its in their own way. According to Wikipedia, “Web 2.0 is a term often applied to a perceived ongoing transition of the World Wide Web from a collection of websites to a full-fledged computing platform serving web applications to end users. Ultimately Web 2.0 services are expected to replace desktop computing applications for many purposes.”

On the other hand, according to Wall Street Technology powered by CMP ‘United Business Media’, the coinventor of Web 2.0, “Web 2.0 refers to Rich Internet Applications (RIAs) that use the Internet as a platform to create interactive user interfaces that resemble PCbased applications. Typically, RIAs emphasize online collaboration among users.”

Several supporters of Web 2.0 have defined it according to their uses, observations and experiences, but in brief, we can say that:

  • Web 2.0 is a conversion of websites from unique information structure having the sources of content and functionality. That’s why being a computing platforms it serves web applications to end-users.
  • Web 2.0 is a new way of organizing and categorizing of the content, audio, video, pictures and movies highly stressing to the growth of the economic value of the Web.
  • Tim O’Reilly, the father of Web 2.0 along with his colleague John Battelle summarized the key principles Web 2.0 applications in 2005. According to them:

    • a)The web as a platform
    b)Data as the driving force

  • Network effects created by an architecture of participation
  • Innovation in assembly of systems and sites composed by pulling together features from distributed, independent developers (a kind of “open source” development)
  • Lightweight business models enabled by content and service syndication
  • The end of the software adoption cycle (“the perpetual beta”)
  • Software above the level of a single device, leveraging the power of the “Long Tail”
  • Ease of picking-up by early adopters
]]> http://www.javabeat.net/2008/09/what-is-web-2-0/feed/ 0