- The Search Agents - http://www.thesearchagents.com -

HTML5 Graphics– An Introduction

Posted By Antony Rajiv On March 5, 2012 @ 12:49 pm In Featured | No Comments

HTML5

 

HTML5 is the latest iteration of the HTML specification. Even as I’m writing this article, it is still under active development. In addition to specifying new markup tags, HTML5 also contains new application programming interfaces (APIs), which enables us to provide rich multimedia and interactive capabilities to web pages, without using proprietary plug-ins.

 

Besides HTML5, the World Wide Web consortium has also published specifications for other related technologies, such as geo-location, offline storage, file management etc.

 

Browsers are more like operating systems now; in fact Google’s Chrome OS is an attempt to use the Chrome browser as an OS for running various web apps. Using HTML5 and related technologies, we can build applications that blur the lines between traditional desktop and web.

 

HTML5 – Graphics with the Canvas Element

 

In this post I will provide a short introduction to the new “<canvas>” element of HTML5 which allows us to draw graphics in browser using scripting. We will look at a very simple “Hello Triangle” example code to render a triangle on the browser window.

 

Before we begin, you need to be aware that HTML5 and the related technologies are only partially supported in the latest version of web browsers. To use the canvas element, you would need the latest version of Firefox, Chrome, Safari (including IOS), or IE 9.0.

 

What is Canvas?

 

In HTML5, <canvas> is a new tag element. Like the physical world, it is a container where you can draw. Here is a complete HTML5 page with the canvas element.

 

 

 

    <!DOCTYPE HTML>     <html>

         <head>

             <title>HTML5 – Hello Triangle</title>

         </head>

          <body>

             <canvas id=”canvas” width=”800″ height=”600″>

             </canvas>

         </body>

    </html>

 

 

This short HTML5 code does not do anything yet. For drawing and manipulating elements within the canvas, we will code using JavaScript.

 

The Canvas Layout and Geometry:

 

The canvas drawing region will be a rectangle with pixel dimensions for width and height that we specify within the <canvas> tag. In our example, width is 800px and height is 600px.

Canvas uses a coordinate system for drawing. The top left hand corner of the canvas is coordinate (0, 0). As we go towards the right, the “x” axis values increase until the value is the width of canvas and as we go down, the “y” axis values increase, until its value is the height of canvas. Based on our example the x-axis will be a line from point (0, 0) to (800, 0) and y-axis will be from (0, 0) to point (0, 600).

 

 

[1]

 

 

In order to access the canvas for drawing we need to acquire its “context”.

In JavaScript we can do it like this:

 

 

var myCanvas = document.getElementById(“canvas”); //canvas element from page

var ctx = myCanvas.getContext(“2d”); //get the 2-Dimensional context 

 

 

Now, “ctx” holds the 2D context for the canvas element, for drawing in a two dimensional space. We will use it to draw our triangle. You might wonder if there is a “3D” context. Currently there is no 3D context as part of the standard. There exists other evolving APIs like WebGL, which can be used for 3D graphics using JavaScript, however this is not part of the standard and has very limited browser support.

 

 Let’s Draw a Line!

 

What do we need to know to draw a line? We need two points, start coordinate (x1,y1) and end coordinate (x2, y2). For line drawing we use the following method:

 

 

function drawLine(ctx, color, x1, y1, x2, y2){

      ctx.beginPath();

      ctx.strokeStyle=color;

      ctx.moveTo(x1, y1);

      ctx.lineTo(x2, y2);

      ctx.stroke();

      ctx.closePath();

  }

 

This method uses the 2D context (“ctx”) and draws lines using it, with the specified color. “moveTo()” method moves to a particular point on the canvas without drawing anything, and “lineTo()” method draws a line to a new point from the current point (specified by previous “moveTo() “). We will use this method to draw the edges of our triangle.

 

Drawing the Triangle:

 

Since we have the code to draw the line, it is easy to draw the triangle using that, here is the method to draw the three lines of the triangle.

 

 

function drawTriangle(ctx, color, x1, y1, x2, y2, x3, y3){

      drawLine(ctx, color, x1, y1, x2, y2);

      drawLine(ctx, color, x2, y2, x3, y3);

      drawLine(ctx, color, x3, y3, x1, y1);

  }

 

 

All we need to do is; pass in the 2D context, the color, the three coordinates for vertices of the triangle, and connect the vertex coordinates using lines.

 

Putting it all together:

 

To draw the triangle during page load we will use the following code, which includes the previously mentioned code for getting the canvas context:

 

 

function drawOnCanvas(){

     var myCanvas = document.getElementById(“canvas”);  

     var ctx = myCanvas.getContext(“2d”);

     // we pass coordinates of vertices of the triangle, color etc.

     drawTriangle(ctx, “#FF0000″, 10, 10, 10, 100, 100, 100);

  }

 

Next we call this from <body> tag on page “onLoad” event:

 

 

<body onLoad=”drawOnCanvas();”>

 

 

And that’s it! After you save and open the html file, you can see the following result on the browser:

 

 

[2]

 

 

Link to live demo of Hello Triangle: http://www.antonyrajiv.com/html5demo/helloTriangle.html [3]

 

Conclusion:

 

This was very short introduction to the world of HTML5; we just looked at one main part of it – the canvas element. There is a lot more which we haven’t explored, but it should hopefully give you a feel of the possibilities of the new standard. Don’t be fooled by the simple looking triangle drawing demo, we can build complete games using just HTML5 and JavaScript!

 

To demonstrate what is possible with <canvas> and the 2D graphics API, here is a short video and link to a game I co-developed, built entirely using HTML5 and JavaScript.

 

 

 

[4]

Video Embed Link: http://www.youtube.com/watch?v=ir2Tz9DVqh0 [5]

URL To Play in Browser: http://www.relfind.com/game/magician.html [6]

Video/Game credits: Brunda Merinal & Antony Rajiv

 

 

 

For “Hello Triangle” and more HTML5 canvas example source code, check out my github repository:

 

https://github.com/alpha2k/HTML5Demos/tree/master/Canvas [7]



Article printed from The Search Agents: http://www.thesearchagents.com

URL to article: http://www.thesearchagents.com/2012/03/html5-graphics-an-introduction/

URLs in this post:

[1] Image: http://www.thesearchagents.com/wp-content/uploads/2012/03/pic13.jpg

[2] Image: http://www.thesearchagents.com/wp-content/uploads/2012/03/tri1.jpg

[3] http://www.antonyrajiv.com/html5demo/helloTriangle.html: http://www.antonyrajiv.com/html5demo/helloTriangle.html

[4] Image: http://www.thesearchagents.com/wp-content/uploads/2012/03/videogam.gif

[5] http://www.youtube.com/watch?v=ir2Tz9DVqh0: http://www.youtube.com/watch?v=ir2Tz9DVqh0

[6] http://www.relfind.com/game/magician.html: http://www.relfind.com/game/magician.html

[7] https://github.com/alpha2k/HTML5Demos/tree/master/Canvas: https://github.com/alpha2k/HTML5Demos/tree/master/Canvas

[8] How to Use jQuery without Compromising SEO Performance: http://www.thesearchagents.com/2013/12/how-to-use-jquery-without-compromising-seo-performance/

[9] How to Make Responsive Web Design Faster: http://www.thesearchagents.com/2013/10/how-to-make-responsive-web-design-faster/

[10] Google +1 and Social Media Marketing For Your Site – How to Add Floating Social Media Marketing Buttons: http://www.thesearchagents.com/2011/08/googleplusone-socialmediamarketing-buttons/

Copyright © 2009 The Search Agents. All rights reserved.