HTML5 has made it’s way, full force into the web design industry. It’s brought more structure to the glorious world wide web(YAY!). On top of all the new SEO perks it brings, we have tons of new and fancy elements to use. One of them is the canvas element, which is an HTML element developers can use to create amazing pieces of “tangible” artwork on the web.
You can play around with some basic effects on w3schools.com
The canvas element is only a container for graphics. You must use a JavaScript to actually draw the graphics. w3schools.com
In those example showcases, you’ll find we’re able to accomplish a number of different basic drawing tasks. They include building out shapes, drawing lines, using canvas to manipulate text, colors, gradients etc. These barely scratch the surface of what we’re capable of creating.
For a little glimpse of what canvas and nifty Javascript can do together, lets take a look at a great interactive typographical tutorial written by Tim Holman, on CodeDrops. He takes us through, start to finish, how to set up the markup, what type of variables we need to use, and creating all the banners and type using Javascript. Then, to top it off, he adds an interactive element which manipulates the text when mousing over the area. Take a look and see what you think. Remember this is just the beginning of the rabbit hole, have fun!
With HTML5 gaining popularity, this tutorial outlines what is really just the tip of the iceberg that is interactive design Tim Holman - CodeDrops
UPDATE: At the time of the tutorial link above, there wasn’t much support for all HTML5 markups, mainly from Internet Explorer. But now, 2016, we have full support from all major browsers, Internet Explorer 9 and above included.
