As the new language for structuring and presenting content, HTML5 is taking the web by storm. It boasts many new revolutionary features for web development and web design. For months, I’ve collected more than 70 HTML5 tools for developers and designers to create new innovative projects and stay ahead of the field!
Today in this article, I will go deep dive to the HTML5 Canvas, one of the most remarkable features of HTML5. I will introduce the Canvas element and position the Canvas as a powerful technology for your Web applications. With that in mind, I’ll focus on the various areas that HTML5 Canvas applied as well as the related applications and tools.
What’s the HTML5 <Canvas> element?
Actually, the <Canvas> element is only a container for graphics with height and width attributes. That’s why you need a script to draw the graphics. Canvas provides several approaches for drawing paths, circles, boxes, characters and adding images. To create a Canvas, you need to specify the id, width, and height of the <Canvas> element. You may see the following syntax:
<Canvas id=”Canvas1″ width=”300″ height=”200″>
As a HTML5 technology, the Canvas’ cross-platform support is promising. It works perfectly across most modern Web browsers of Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror and Opera as well as the mobiles of iPhone/iPad and Android.
What is HTML5 Canvas used for?
The examples provided below will give you some clear ideas what you can do with <Canvas> element before you start building your own implementations.
1. Graphics Design
Canvas allows you to draw all kinds of graphics – shapes, images, text, lines, etc, almost anything you want. HTML5 Canvas can be used as basic drawings of rectangles, coordinates, gradient fills, opacity, paths, text and advanced graphic drawings like transforms, state saving, clipping. Thus many people try to use Canvas in the areas of charts, graphs and even 3D website design.
Another hidden power of HTML5 Canvas is the special image manipulation. This is also the difference between Canvas and SVG. With the Canvas element, you can perform image effects on pixel based artworks. It is easy to design a new image or import an image in the Canvas and operate it as you want. In web design, you may employ Canvas to design awesome images with special effects like sepia, glow, grayscale image hover, emboss, page turn effects, blur, white & black, and etc.
The Canvas graphic applications below would give you some inspiration of what Canvas can do for graphic design.
I was deeply impressed by this Canvas application – Lucid Chart. It features the visual collaboration that makes drawing diagrams fast and easy. This HTML5-based Web app includes many of the UI elements. If you are a Visio user, you should really give this professional Canvas application a try.
As a Canvas application as well as a Canvas tool, iGrapher is used for charting, analysis and prediction of different stock, currency and commodity markets. This free web-based financial market visualization tool uses Canvas to draw the graphs of financial data.
Gartic Canvas Sketch
This is another graphic drawing application of Canvas. It is called Gartic Canvas Sketch and released by Gartic. It uses Canvas tag for featuring the usual pencil, eraser, line and shape tools, flood fill, color picker, undo, etc, Gartic Canvas Sketch also enables you to watch an animation of how you sketched your artwork and the output formant is PNG, GIF or JPG.
This demo is a Canvas applications showcasing different weather effects. It is an implementation of a full 8-bit color cycling engine. You may choose many color cycling scenes with some ambient environmental soundtracks to match.
2. Images and Photo galleries
It is very easy to create much more beautiful image or photo galleries with HTML5 Canvas. To animate using the Canvas tag, you should create a loop and then set the times per second that you redraw the entire Canvas. For example, if you want to animate an image or photos, you need to hold a proper reference to that image and then redraw the image by placing it in a different position on the Canvas on every tick of the loop. Such images or photo galleries by Canvas may be used for web picture showcasing, product displaying or even for customers to drop products into a shopping cart.
Here are 3 Canvas applications used for images or photo gallery. Some are developed with amazing interactions, which gives a fabulous experience to users.
Dynamic Image Collage
Dynamic Image Collage is built using Canvas element, allowing you search for images from Flickr. This application will automatically create the images or photos you added to Canvas as a new layer. You can manipulate the layers in various ways, including: move, scale, rotate, move layer up and down, remove layer, change opacity, change blending mode and enable or disable shadow. It helps you create a personal image gallery.
Surface Photo Gallery
This Canvas photo experiment is created by Ernest Delgado. It’s a UI Canvas implementation that closely follows the “photo table” application of Microsoft Surface. This HTML5 Canvas application allows users to create surface photo gallery with drag & drop instead of redrawing every image each time when one of them is dragged
Coulisse photo slideshow
Coulisse is a Canvas slideshow created by Elmer. This is a Canvas application with cover flow effect using the Canvas element. Click the photos in the demo, and you will enjoy a new and exciting type of slideshow with its own animated transitioning effect.
Take a look at the following three Canvas applications and get inspired by the powerful Canvas animation.
This simple 3D simulation of a leaf floating within the forest is created by Andrés Fernández . He places the leaf in a Canvas on the forest background modifying its transformation matrix to show the animation of leaf floating.
Fish IE Tank
FishIE Tank is also a Canvas animation. It is an adaptation of the Microsoft embedded in a PowerBASIC application instead of running it in a browser.
Crazier Tentacles is a physics-based version of Canvas animation. This HTML5 application uses the same formula to generate the target shape and elastic rod physics, making it go towards that shape.
The Canvas element contains a drawable region defined in HTML code with height and width attributes, allowing for dynamically generated graphics. Due to this feature, HTML5 Canvas is popularly used for gaming development. Now, with the advent of the HTML5 Canvas element, you can create snazzy looking web games easier than ever before without using Flash.
Here are two of my favorite games by HTML5 Canvas. Check out and you will be amazed that Canvas is really capable of powering online games.
Pirates Love Daisies
Pirates Love Daisies is a Canvas game about pirates fighting all kinds of sea creatures (and seagulls) to protect their daisy patch.
This math based HTML5 Canvas game will stress your brain while having a nice game experience. The idea is to select the number tiles to give the exact total that has been asked. Therefore, the more bricks you use, the more points you’ll get.
Other useful free online HTML5 Canvas tools
Since HTML5 Canvas is definitely change the way we create website and web apps, there are plenty of Canvas resources and tutorials online. Although one can easily integrate Canvas into the web pages, you will require some programming and mathematical skills for creating the interactive effects, graphs, games, animations and functions. Here, I just show you some free online Canvas tools for you to simplify or optimize your HTML5 Canvas project in the above areas.
Online 3D Sketch Tool – A sketching tool uses HTML5 Canvas to make 3D drawing.
Paper.js – An open source HTML5 Canvas vector graphics scripting tool.
Harmony – An HTML5-based tool lets you draw on white Canvas using different brushes.
Cloud Canvas – A HTML5 image creator and editor.
Canvas Creator – A HTML5 game tool needs your login in.
CanvasLoader Creator – A tool for you to generate scripted preloaders and create spinners using the HTML5 Canvas object.
What do you think?
Alright, we will come to the end of this part. The Canvas element really represents a big forward in graphics capabilities in the web development. Hopefully this deep dive into HTML5 Canvas introducing its usage areas as well as applications and tools is helpful for you. If you have any ideas about the HTML5 Canvas technology, feel free to share with us in the comment.