HTML 5 has introduced and enhanced a large set of features that includes controls, APIs, semantics, multimedia and structure. But if you ask me the most exciting feature of HTML5 is the <canvas> element. It can be used to create amazing effects, draw vector graphics or produce interactive games and animations. It is one of the features of HTML5 that is supported in almost all the modern browsers and with the help of Javascript most older browsers can adapt to it.

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.

Creating an interactive bubblechart with HTML5 canvas

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.

Interactive Typography Effects

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.

3D Slideshow

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.

Drag and Drop

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.

Image Effects

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.