Posted on February 23, 2010
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:
- 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.
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.
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
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.
HTML 5 Canvas Project #1: Hello World
There you have it, a short introduction to the HTML 5