(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:

• Building HTML5 Pages from Scratch [Article]
• HTML5: Generic Containers [Article]
• HTML5: Developing Rich Media Applications using Canvas [Article]