Diving into the world of HTML5 Canvas


          Just like the significance of a canvas in the life of every painter, even the world of HTML5 web development offers the developer a complete freedom of converting his/her ideas regarding graphics and animations into reality via a technology named as HTML5 Canvas. Considering the ongoing popularity and demand for HTML5 and its robust specifications, a large majority of web developers have already started taking complete advantages of this technology to draw graphics and create animations directly within the browser- something that was impossible in the past. As you read through this post, you'll get to learn more about HTML5 Canvas, its features and usage-everything under a single hood. 

A closer look at HTML5 Canvas
        HTML <canvas> element is basically an element defined in HTML code and is used for drawing graphics via scripting. Serving as a container for graphics, HTML5 Canvas offers a wide range of methods which allow you to draw boxes, paths, text, circles and even for adding images. This canvas will be shown as a rectangle in your web app, allowing you to use Javascript for drawing any kind of shape. HTML5 Canvas element comes with a Canvas API which can be coupled with writing Javascript for accessing key canvas areas via a set of specific drawing functions. Dynamically generated graphics are an offering of this HTML5 Canvas API. 

Understanding the concept of HTML5 Canvas rendering contexts
         Every HTML5 Canvas element includes a context which defines HTML5 Canvas API. For instance, while using HTML5 Canvas element, the 3d context will be utilized for drawing 3D Graphics and also for bitmap image manipulation. 

A look at usage of HTML5 Canvas Element 
            For understanding the use of HTML5 Canvas, you'll need to have a code editor in addition to HTML5 canvas-compatible browser. For this tutorial, I've used the Sublime Text code editor along Google Chrome browser.  

HTML Structure would look like this: 
<canvas id="demoCanvas" style="border: 1px solid #000; background: #ccc;" width="400" height="150"></canvas>

Next is the Javascript that can be included towards the bottom of HTML page: 
var elementID = document.getElementById('demoCanvas');
    context = elementID.getContext('2d');
    // define example...

On executing the above Javascript, your Google Chrome browser will create the canvas elements with a width of 300 pixels and a height of 150 pixels. You are free to change the size of the canvas elements by assigning different values to height and width properties. 

Additionally, if you observe the Javascript carefully, you'll find that the canvas has been offered an id attribute. You can use CSS for adding a border which would make the canvas visible via a thin frame. If you've noticed carefully, between opening and closing <canvas> tags, I've added the content that will be displayed in case browser doesn't support the canvas elements.   

Coming to the Javascript now. Well, it starts with two lines, the first one creates a variable that caches the canvas element via the assigned ID and the second one creates a context which references 2D Context for the canvas via getContext() function. For your information, I will be using this context variable for accessing different canvas drawing properties and functions.  

Some Basic Canvas Examples
           With HTML5 Canvas, you can easily create any type of object such as a path, text, line, curve, shapes etc. Let us understand the use of HTML5 via the three examples discussed below: 

Example No.1- Drawing lines 
        We'll use four canvas API methods for drawing a line. To begin with, we'll use beginPath() method which would instruct browser to prepare to draw new path. After this, the moveTo(x, y) method will be used for setting the line's starting point. Third method is lineTo(x,y) which will allow you to set the line's ending point, followed by finally drawing the line by simply connecting the starting and ending points. At this point, eventhough the line has been drawn, it's not visible. So, we'll be using the stroke() method for displaying the created line with the default black color. 
Here's a look at the four methods:
context.moveTo(20, 90);
context.lineTo(200, 50);

Output for the same would look like this: 

Example No.2- Drawing Text 
        In order to draw text on the HTML5 canvas, we'll be using the fillText(string, x, y) method along with font property for setting font, size and style of the text. Have a look at this: 
context.font = "22px verdana";
context.fillText("HTML5 Canvas Text",20,70);

Output for the same will be similar to this: 

Example No.3- Drawing a Rectangle 
    Using HTML5 canvas for drawing a rectangle just expects you to use the fillRect(x, y, width, height) method for setting the coordinates along with dimensions. Plus, we'll also use the fillStyle property for setting the rectangle's fill color. 
Output would look like this: 

PS- The rectangle has been positioned near the top left corner of the page. 

We're done!
Final Thoughts 
If you've been using HTML5 since years from now, you'd definitely regret missing the opportunity of making the most of the HTML5 Canvas technology. So, what keeps you waiting? Get going now and explore this great HTML5 add-on for your benefit.

Author Bio: Rick Brown is a skilled iPhone application developer for Mobiers Ltd – a reliable Mobile development company. You can explore more about the development tips and tricks by clearing your queries with him. 

No comments:
Write comments

Popular Posts