HTML 5 Canvas For Flash Developers #1: What The #@*! Is The HTML 5 Canvas?

In this set of tutorials, we will explore how the HTML Canvas relates to Flash developers.

So, the first question to answer about the HTML 5 Canvas appears to be this:

“What The #@*! Is The HTML 5 Canvas?“

The short answer is this:

It is an area on a web page set-aside to display and manipulate bit-mapped pixels in “immediate” mode. “Immediate” mode is a way to draw pixels that gives a programmer ultimate control, but requires the screen objects to be tracked and be redrawn entirely in code. You create it with the HTML tag, and you manipulate it with JavaScript. The Canvas is a window into a bitmapped world that, until recently, only existed with plug-ins like Silverlight , Java ,and of course Flash. The Canvas is currently supported (in part) in the latest versions of Firefox, Opera, and Chrome, but not Internet Explorer

The tag was created by Apple initially to support their OSX widgets, and as extension to Safari. The tag was recently adopted as part of the HTML 5 spec after being pushed by both Apple and Google. The HTML 5 spec has many parts besides the , and many of them should seem familiar to Flash developers:

• H.264 video support (Flash has this already, had it since 2007. Oh, and by the way, Apple’s Steve Jobs can go on and on about Flash being proprietary…even though the SWF format is open, but at the same time his love for H.264 makes no sense, as it is CLOSED, proprietary format! )
• Local storage (more like a Flash shared object, not a Cookie)
• SVG support: SVG is a vector graphics engine for web browsers. Yep, Flash has had that for a long, long time too.

Since the works in “immediate” mode, it does not have a Display List built-in, like Flash AS2/AS3 (which operate on a “Retained” mode, but can be made to work in “immediate” mode by going right to bitmaps themselves). Instead, you must keep track of all objects and their movement yourself. That means that very simple things that you are used to in Flash, are simply not available in the unless you build support for them yourself. For example, There is no easy way to create tweens, except to create them all in-code. The good news for hardcore programmers, is that sheds a lot of layers and forces you to write clean display code from the get-go. Blitting engines should be par for the course because they will be the an efficient way to display graphics on the Canvas. However, for the legions of designers and designers/programmers who use Flash on a daily basis to create interactive (but not hardcore) web content, the state of the Canvas is a freaking nightmare. While there are a lot of promising tools for JavaScript (i.e. http://processingjs.org/     http://www.ambiera.comcopperlicht/ -thanks Paul) to help c  no tools currently exist that will make the process of creating apps or animations easy for designers. In a few months, when producers at over-zealous agencies have sold their big-name clients on this “Flash replacement that works on the iPad“, design and development teams will suffer long and troublesome hours trying to make their claims a reality.

Things For Flash Developers To Note About the HTML 5 Canvas

For Flash developers, a few things stick out as interesting about the .

• Browser compatibility is an issue. You will have to write code that targets one browser or another. One of first test with Mouse events proved this to me.
• Recall, that many of us “old” guys (web developers before 2000) used HTML until Flash became viable. We didn’t adopt Flash for web sites because Macromedia made it, we adopted it because it worked. The problems with HTML 5 are still the same problems we tried to solve with Flash and HTML 2, HTML 3 and HTML 4: Cross browser issues and the need for real interactivity.
• Again, There are no real “designer friendly” tools for the Canvas. In fact, a product like the Flash IDE would be perfect to make Canvas apps because it could spit put all the complex JavaScript to make it all work much faster than coding it by hand. I fully expect Flash CS6 will have an “Export as Canvas” option,
• JavaScript is essentially ActionScript 2.0, so it will be familiar, but also seem like a few steps back from AS3
• There is still no easy way to “hide” your code, but you can use an JavaScript Obfuscator (thanks to Chris Cutler for this point) that does essentially what a SWF encryptor does for Flash apps.

HTML 5 Canvas Hello World

So, now that you know a bit about the Canvas, here is a “Hello World” app using the element. Be sure to view this with the latest version of Firefox, Chrome, or Safari. In the next lesson we will discuss a bit more about how a program like this works, but for now: Hello World!

The area below is a :

See demo here

Here is the HTML code used to create that Canvas: (by the way, a lot of this code was adapted from the code presented here: http://dev.opera.com/articles/view/html-5-canvas-the-basics/) I’ve added a “Main()” function because I suspect that is the way my code will be going in the future.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<html lang="en">   <head>     <meta charset="utf-8">     <title>HTML 5 Canvas Project #1: Hello World</title>  <script type="text/javascript">  main();  function main() {  window.addEventListener('load', eventWindowLoaded, false);  }   function eventWindowLoaded() {      var elem = document.getElementById('canvasOne');         if (!elem || !elem.getContext) {  return;      }      var context = elem.getContext('2d');         if (!context) {         return;      }       context.fillStyle = '#000000';       context.fillRect(0, 0, 600, 400);       context.fillStyle    = '#00ffff';       context.font         = 'italic 30px sans-serif';       context.textBaseline = 'top';       context.fillText  ('Hello world!', 0, 0);       context.font         = 'bold 30px sans-serif';       context.strokeText('Hello world!', 0, 50);       }             </script>       </head>       <body>       <p><canvas id="canvasOne" width="600" height="400">        Your browser does not support the HTML 5 Canvas.   </canvas>        </body>    </html>

There you have it, a short introduction to the HTML 5 . Next time We’ll explore some code in more depth.