Video + canvas = magic. You’ve already learned about the <video> and <canvas> elements, but did you know that they were designed to be used together?
In fact, the two elements are absolutely wondrous when you combine them! I’m going to show off a few super-simple demos using these two elements, which I hope will prompt cool future projects from you fellow web authors. (All of these demos work in every modern browser except Internet Explorer.) First, the basics If you’re just starting with HTML5, you may not be familiar with the <video> element and how to use it. Ai to Canvas Plug-In. Almost any Illustrator artwork can be exported to a HTML5 canvas element.
Where canvas lacks support for a specific feature, Ai->Canvas automatically rasterizes the artwork to a bitmap and properly positions the image on the canvas. Bring your artwork to life by adding animations to your Illustrator drawings. Ai->Canvas supports rotation, scaling, fading, and movement along a path. HTML5 Canvas Element Guide. The HTML5 <canvas> element has a unique history.
Starting out as an Apple creation and dating back to 2004, canvas was eventually added to the official W3C HTML5 spec, becoming one of the most interesting and exciting parts of HTML5. Unfortunately, this element takes a bit of work to understand and, unlike your usual run-of-the-mill HTML elements, requires more than just static markup and styling.