Naveen's Weblog

Bridge to future

Archive for the ‘HTML 5’ Category

Developing Next Generation web applications

HTML 5 Canvas – Line

Posted by codingsense on September 9, 2012


In the previous post we have drawn all the available objects on the canvas.
Lets look into the drawLine method.

<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<script type="text/javascript">

    function load() {
        // Get a reference to the element.
        var elem = document.getElementById('myCanvas');

        // Always check this for non supported browsers
        if (elem.getContext('2d')) {
            // Get the 2d context.
            var context = elem.getContext('2d');
            //Set color for filling
			context.fillStyle = "#62ADE3";
			//Apply the rectangle with set color
            context.fillRect(0, 0, 500, 500);
			
			drawLine(10, 10, 100, 100);
		}
	}
	
	function drawLine(sourceX, sourceY, destinationX, destinationY) {
        var elem = document.getElementById('myCanvas');
        var context = elem.getContext('2d');
        context.strokeStyle = "rgb(0, 0, 0)";
        context.lineWidth = 3;
        context.moveTo(sourceX, sourceY);
        context.lineTo(destinationX, destinationY); // Black line
        context.stroke();
    }

</script> 

</head>
<body onload = load();>
	<canvas id="myCanvas" width="500" height="250">
		Hi I am Mr.Canvas and your browser doesn't support me 😦
	</canvas>
</body>
</html>
  1. First we get the canvas element and the context.
  2. Next we set the stroke style, that is what color brush has to be used to draw the line.
  3. Set the line width
  4. Move the starting point to sourceX and sourceY pixels.
  5. From there we draw line to the given destinationX and destinationY pixels.
  6. And we stoke the element, this is actully where the line is drawn on the canvas.

So only moveTo and lineTo methods are enough to draw a line on a canvas. But in many other tutorials you have seen beginPath and closePath methods also used. Lets see why they are used and when its useful to use them.

<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<script type="text/javascript">

	var context;
    function load() {
        // Get a reference to the element.
        var elem = document.getElementById('myCanvas');
		
        // Always check this for non supported browsers
        if (elem.getContext('2d')) {
            // Get the 2d context.
            context = elem.getContext('2d');
            //Set color for filling
			context.fillStyle = "#62ADE3";
			//Apply the rectangle with set color
            context.fillRect(0, 0, 500, 500);
			drawPath();
			
		}
	}
	
	function drawPath() {
		context.strokeStyle = "rgb(0, 0, 0)";
        context.lineWidth = 3;
		context.beginPath();
		context.moveTo(10,10);
		context.lineTo(100, 100);//1
		context.lineTo( 70, 180);//2
		context.lineTo(30, 200);//3
		//context.closePath();
        context.stroke();
    }

</script> 

</head>
<body onload = load();>
	<canvas id="myCanvas" width="500" height="250">
		Hi I am Mr.Canvas and your browser doesn't support me 😦
	</canvas>
</body>
</html>

Copy the above code and run it. You will see 3 lines drawn on the canvas. Now uncomment the context.closePath() in the drawPath method and see what happens.
Consider you want to draw a path on the canvas and then you need to join the last point drawn with the starting point, then the beingPath and closePath methods are handy.

Note that when drawing path you can use moveTo method only once between beginPath and closePath methods. If there is another moveTo then it will start up a new path and the closePath will not close the path as desired.


Happy Learning 🙂
Codingsense

Advertisements

Posted in HTML 5 | Tagged: , | Leave a Comment »

Peep into HTML5 Canvas

Posted by codingsense on September 9, 2012


Canvas is a wonderful gift in HTML 5. You can draw any kinds of shape and do loads of animations using it. First lets get clear understanding on what all can be drawn on canvas.

Lets make our hands dirty by going step by step to see how easy we can create Canvas elements.
Lets work on the get the below canvas element and to cover most of the available canvas elements.

canvas_basics
Lets start first creating the canvas with all necessary html headers.
Create an empty file with extension .htm or .html and add the below lines in it. Make sure you open it the browser that supports HTML5 (Chrome, Safari, Firefox).

<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<script type="text/javascript">

    function load() {
        // Get a reference to the element.
        var elem = document.getElementById('myCanvas');

        // Always check for properties and methods, to make sure your code doesn't break 
        // in other browsers.
        if (elem.getContext('2d')) {
            // Get the 2d context.
            var context = elem.getContext('2d');

            context.fillStyle = "#62ADE3";
            context.fillRect(0, 0, 500, 500);
			
            drawLine(10, 10, 100, 100);
			drawCircle(150, 60, 50);
			drawCurve(150, 150, 200, 100, 250, 150);
			writeText("Welcome to HTML 5",250,40);
			drawRect(300, 60, 150,100);
			drawArc(100, 200, 25, 1* Math.PI, 2* Math.PI, false);
			drawArc(200, 200, 25, 1/2 * Math.PI, 2* Math.PI, false);
			drawArc(300, 200, 25, 1/3 * Math.PI, 2* Math.PI, false);
			drawArc(400, 200, 25, 0 * Math.PI, 2* Math.PI, false);
        }
	}

	function drawArc(pointX, pointY, radius, startAngle, endAngle, clockwise)
	{
		var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.arc(pointX, pointY, radius, startAngle, endAngle, clockwise);
        context.lineWidth = 15;
        context.strokeStyle = "black";
        context.stroke();
	}
	
	function drawRect(pointX, pointY, width, height)
	{
		var elem = document.getElementById('myCanvas');
        var context = elem.getContext('2d');
		context.rect(pointX, pointY, width, height);
        context.fillStyle = '#8ED6FF';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
	}
	
	function writeText(text,pointX, pointY)
	{
		var elem = document.getElementById('myCanvas');
        var context = elem.getContext('2d');
		context.font = "20px tahoma";
		context.fillText(text, pointX, pointY);
	}
	
	function drawCircle(centerX, centerY, radius)
	{
		var elem = document.getElementById('myCanvas');
        var context = elem.getContext('2d');
		context.beginPath();
        context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#8ED6FF";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
	}
  
  function drawCurve(point1X, point1Y, point2X, point2Y, point3X, point3Y)
	{
		var elem = document.getElementById('myCanvas');
        var context = elem.getContext('2d');
		context.beginPath();
        context.bezierCurveTo(point1X, point1Y, point2X, point2Y, point3X, point3Y);
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
	}
  
    function drawLine(sourceX, sourceY, destinationX, destinationY) {
        var elem = document.getElementById('myCanvas');
        var context = elem.getContext('2d');
        context.strokeStyle = "rgb(0, 0, 0)";
        context.moveTo(sourceX, sourceY);
        context.lineTo(destinationX, destinationY); // Black line
		context.lineWidth = 3;
        context.stroke();
    }
    
</script> 
</head>
<body onload = load();>
	<canvas id="myCanvas" width="500" height="250">
		Hi I am Mr.Canvas and your browser doesn't support me 😦
	</canvas>
</body>
</html>



Ok double click the file and check how your cavas is painted.
Whenver playing around with canvas you will do all the stuffs in javascript, so the below body part is untouched.
From next post lets look into each of the elements in depth.

Happy Learning 🙂
Codingsense

Posted in HTML 5 | Tagged: , | 1 Comment »

What is HTML 5?

Posted by codingsense on August 25, 2012


As per Wikipedia,
HTML5 is a markup language for structuring and presenting content for the World Wide Web, and is a core technology of the Internet originally proposed by Opera Software. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and, as of August 2012, is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well.


Basically, HTML 5 is the latest version of HTML released which has added many functionalities, giving us a good set of features with which we can develop very rich and iteractive web applications without depending much on any other tools.


For HTML5 references,
What’s New in HTML 5?
HTML 5 and Visual Studio


Browser limitations:
None of the available browsers support all features of HTML 5 specifications. I found a website http://html5test.com/ which gives points on how much support the browser provides for HTML 5. I checked with most of the browsers and found google chrome to take the highest points of 437. In future all browsers should support all features provided by HTML 5, but to play around now I am currently using google chrome browser.

From next post lets dive deep into some of the new elements provided in HTML 5.

Happy learning 🙂
Codingsense

Posted in HTML 5 | Tagged: | Leave a Comment »