This feature was originally designed by Apple for creating lightweight widgets for its mobile devices but now it is openly developed under the W3C standards. This has provided the <canvas> element a unique flexibility and application. By working with Javascript and CSS3, <canvas> can create charts & graphs, web based games & animations and interactive websites.

One can easily integrate Canvas into the webpages and the process is as simple as adding any other markup. But you will require some programming and mathematical skills for creating the interactive effects, graphs, games, animations and functions. Here are a few tools that are available to you with the Canvas element.

Drawing tools

Rectangles

Arcs

Paths and line drawing

Bezier and quadratic curves

Effects

Fills and strokes

Shadows

Linear and radial gradients

Alpha transparency

Compositing

Transformations

Scaling

Rotation

Translation

Transformation matrix

Getting data in and out

Loading external images by URL, other canvases or data URI

Retrieving a PNG representation of the current canvas as a data URI

Here are a few examples of the usage of HTML5 Canvas, although most of them are mere basic concepts, i am confident that you can take them to the next levels through your creativity.

Canvas can help you to create an interactive bubble chart which you can use to visualize up to five dimensions of data at once. In this tutorial Josh Marinacci, a software engineer explains how to use HTML5 canvas to build an interactive chart that works on desktop mobile and then populate it with real data.

This tutorial will teach you how to create basic charts which you can improve and create your own charts. It also provides you with a downloadable full source file of the project which can be quite helpful in your learning process.

You can use HTML5 Canvas to create some gorgeous looking typographic effects which will add a unique style to your design. In this tutorial codrops teaches about basic interactive type manipulation through the Canvas an covers development of dynamic type effects. This effect can have multiple uses as you can use it for animating logo or even for making a unique coming soon page.

This 3D Slideshow tutorial is done by Hakim el-Hattab who is known for his awesome application of Javascript and HTML5 Canvas. You can use this concept to produce a image slider for your portfolio page or create a unique gallery showcase. 3D Slideshow effect can be used to present content, introductory text or to create an interactive learning experience.

This is one of the most awesome effects that one can achieve with HTML5 Canvas. Because of its draggable attribute HTML5 Canvas supports interacting with imaes. When you combine it with kinetic.js, you can create anything ranging from a visual categorization app to an interactive pinboard for arranging and displaying images. This example will show how the image board can be one.

There are a plenty of uses for this effect, you can use them for arranging content, creating agile project management tools or a unique way for clients to drop products into a shopping cart.

In this tutorial Ilmari Heikkinen will take you through some examples of HTML5 Canvas’s most powerful feature, and that is its pixel interpretation. You can use this feature to recreate any image filter or effect and apply it to themes or apps.