Rich Internet Application (RIA) – Canvas

Exclusive offer: get 50% off this eBook here
Instant Migration to HTML5 and CSS3 How-to [Instant]

Instant Migration to HTML5 and CSS3 How-to [Instant] — Save 50%

Discover how to upgrade your existing website to the latest HTML5 and CSS3 standards book and ebook.

$12.99    $6.50
by Dushyant Kanungo | February 2013 | Web Development

This article created by Dushyant Kanungo, the author of Instant Migration to HTML5 and CSS3 How-to gives a brief introduction of the interactive Rich Internet Application platform with HTML5 and CSS3. We will discuss a few basic possible applications of Canvas in routine websites.

(For more resources related to this topic, see here.)

RIA — Canvas (Become an expert)

If you started your career in web design or development in the late 90s to early 2000s, there is definitely a good chance that at some point, you've been asked to do a zany, cool, and bouncy website using (then) Macromedia Flash.

After it was acquired by Adobe in 2005, Flash transformed from being a stage-based, procedural script-running, hard-coded, and embedded object to a Rich Internet Application ( RIA).

With the arrival of Adobe Flex as an SDK for Flash's Action Script 3.0, the company tried to lure more developers into Flash development. Later, Adobe donated Flex to the Apache foundation. All this, and yet no browser vendor ever released the Flash plugin integrated with any of their products.

Flash-based applications took time to develop, never had any open source frameworks supporting the final product, and came across many memory-hogging security threats.

The biggest blow to this technology came when Apple decided not to support Flash with any of the iPad, iPhone, or iPod devices.

The message was loud and clear. The web needed a new platform to support Rich Internet Applications, which can be seamlessly integrated in browsers without any third-party plugin requirement at the visitors' end.

Presenting HTML5 Canvas.

Getting ready

The HTML5 canvas element provides a canvas (surprise!) with a specified height and width inside a web page, which can be manipulated with JavaScript to generate graphics and Rich Internet Applications.

How to do it...

It is just the same as it was with video or audio.

<canvas id="TestCanvas" width="300" height="300"> Your browser does not support Canvas element from HTML5. </canvas>

The preceding syntax gives us a blank block element with the specified height and width, which can now be identified with some JavaScript by the ID TestCanvas.

<script> var test=document.getElementById("TestCanvas"); var col1=c.getContext("2d"); col1.fillRect(0,0,20,80); col1.fillStyle="#808"; </script>

A variable named test is defined with the method document.getElementByID() to identify a canvas on the web page.

The getContext object, which is a built-in HTML5 object, is defined in another variable called col1. The value 2d provides properties and methods for drawing paths, boxes, circles, text, images, and more.

The fillRect(x,y,width,height) method provides four parameters to draw a rectangle on the x and y coordinates. Similarly, the fillStyle() method defines the fill color of the drawing.

The output is as follows:

The origin of the x and y coordinates lies at the top-left corner of the canvas, unlike the graph paper (which most of us are used to), where it lies in the bottom-left corner.

Appending the graph for multiple columns by additional getContext variables can be done as follows:

<script> var test=document.getElementById("TestCanvas"); var col1=test.getContext("2d"); col1.fillStyle="#808"; col1.fillRect(10,0,20,80); var col2=test.getContext("2d"); col2.fillStyle="#808"; col2.fillRect(40,0,20,100); var col3=test.getContext("2d"); col3.fillStyle="#808"; col3.fillRect(70,0,20,120); </script>

We get the following output:

The getContext variables can be defined with different methods as well.

To draw a line we use the moveTo(x,y) and lineTo(x,y) methods:

line.moveTo(10,10); line.lineTo(150,250); line.stroke();

The moveTo() method defines the starting point of the line and the lineTo() method defines the end point on the x and y coordinates. The stroke() method without any value assigned to it connects the two assigned points with a line stroke.

The stroke() and fill() are the ink methods used to define the visibility of the graphic.

To draw a circle we use the arc(x,y,r,start,stop) method:

circle.beginPath(); circle.arc(150,150,80,0,2*Math.PI); circle.fill();

With the arc() method, we must use either the fill() method or the stroke() method for a visible area.

For further exploration, here are a few more canvas methods that can be tried out:

Text for canvas:

  • font: This specifies font properties for text

  • fillText(text,x,y): This draws normal text on the canvas

  • strokeText(text,x,y): This draws stroked text without any fill color

Here are the syntaxes for the preceding properties:

text.font="30px Arial"; text.fillText("HTML5 Canvas",10,50); text.strokeText("HTML5 Canvas Text",10,100);

 

And for the last example, we will do a raster image drawing using the ID into the canvas:

var img=document.getElementById("canvas-bg"); draw.drawImage(img,10,10);

Similar to the ID for Canvas, the image ID is selected by the document.getElementById() method, and then we can use it as a background for the selected canvas.

The image used with the ID canvas-bg can be placed in a hidden div tag and later can be used as a background for any graph or chart, or any other graphic. One of the most practical applications of the text and image drawing on a canvas could be the customization of a product with label image and text over it.

How it works...

There are many places where Canvas may be implemented for regular web development practices. It can be used to generate real-time charts, product customization applications, or more complex or simple applications, depending on the requirement.

We know that Canvas is an HTML5 element and the key (for Canvas) always remains with the JavaScript used in it. We get support from all the browsers apart from IE8 or below.

There's more...

It always helps when a developer knows about the resources available at their disposal.

Open source JS frameworks for Canvas

There are many open source JavaScript frameworks and libraries available for easy development of the graphics with Canvas. A few noteworthy ones are KineticJS and GoJS. Another framework is ThreeJS, which uses WebGL and allows 3D rendering for your web graphics.

Summary

This article discussed about the Rich Internet Application (RIA) platform with HTML5 and CSS3. We also saw how Canvas can be used implemented in regular web development practices.

Resources for Article :


Further resources on this subject:


Instant Migration to HTML5 and CSS3 How-to [Instant] Discover how to upgrade your existing website to the latest HTML5 and CSS3 standards book and ebook.
Published: January 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Dushyant Kanungo

Dushyant Kanungo has more than 10 years of professional experience in web design and development. A graduate of Web Design from the University of the West of England, Bristol, his core interests are information architecture, human-computer interaction, and the principles of web design.

In the past, he has served many world-renowned clients such as Sony Ericsson, Dyson Ltd., Hilton Hotels, and Bausch & Lomb, among others.

Dushyant is a native of Indore, India and currently lives in Bristol, United Kingdom.

You can visit Dushyant at http://www.dushyantkanungo.com or follow him on Twitter (Twitter handle @dushyantmk).

Books From Packt


 Instant SASS CSS How-to [Instant]
Instant SASS CSS How-to [Instant]

 Backbase 4 RIA Development
Backbase 4 RIA Development

ExtGWT Rich Internet Application Cookbook
ExtGWT Rich Internet Application Cookbook

HTML5 and CSS3 Transition, Transformation and Animation
HTML5 and CSS3 Transition, Transformation and Animation

HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook

 HTML5 Multimedia Development Cookbook
HTML5 Multimedia Development Cookbook

 Responsive Web Design by Example
Responsive Web Design by Example

 Designing Next Generation Web Projects with CSS3
Designing Next Generation Web Projects with CSS3


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
1
4
h
j
X
H
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software