Naveen's Weblog

Bridge to future

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

Advertisements

One Response to “Peep into HTML5 Canvas”

  1. […] « Peep into HTML5 Canvas […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: