Why is creating content with HTML5 Canvas much more complicated than authoring with Flash? [closed]

Question

I've been doing Flash for couple of months and I love it. I can easily use a rectangle tool to draw a rectangle and do shape/motion tweening within seconds.

Lots of people are talking about HTML5 vs Flash nowadays and I took a look on HTML5 Canvas today. To my surprised, I see whole bunch of "code". It's so complicated, they need to make a lot of calls (fill, stroke, moveto, closepath etc...) to make a simple shape. And even dozens lines of code mixing with javascript to do a simple movement???

Am I missing something? It'll make animation 10x more complicated with HTML5 Canvas than Flash.

Answer 1

Good question. I've been working with <canvas> for a couple of years and I'm also a former flash developer.

I don't think too you are missing something. Well, <canvas>, you know, it has to look more complicated than Flash :). Flash is a client tool. It provides an awesome GUI, lots of visual and immediate features and lets the user compose animations sometimes without a single line of code (actionscript). On the other side, with that particular HTML5 tag you can do a lot of things that are easier to do by Flash technology. But there are several advantages about using it, for example:

• It's cross-browser (let's assume by IE9 there will be full cross-browser compatibility - btw there is excanvas lib that writes vml in place of canvas in IE<9)
• You don't have to download a plugin to view something
• It doesn't 'overload' the DOM
• You can wrap some logical patterns (draw lines, draw shapes, animate something) inside a library to make it easier to use.
• Once you know how it works, you can design and build awesome smooth and lightweight gadgets/charts/animations
• You don't have to pay to use it :)
• etc.

By the way Flash has a very different goal: it lets the user build everything inside a particular platform without a full integration into the browser. It is a particular (and surely awesome!!) technology wrapped inside the browser with the main scopes that are multimedia and unlimited kinds of animation.

Canvas' goal is completely different. It's a 'new' way to obtain shapes, animations etc. inside the browser, inside a particular page, through that tag. Remember that you have to write JS code that can render something in both 2d and 3d context (isn't it sooo good??? :D)

P.s. take a look at these two canvas projects we (me and my colleauges @ work) have proposed for the software engineering course at university:

AjaxDraw, full <canvas> based painter, it export/import svg files

SketchYourSite, items represented by <canvas> elements

Answer 2

I’m not exactly clear what you’re asking. <canvas> is a standard, not an authoring tool. Flash has an authoring tool because it’s written by one company that makes its money selling authoring tools for it ($699 for Flash Professional at the time of writing).

I don’t do this sort of thing myself, so I’m not familiar with the state of <canvas> authoring tools, but apparently Adobe is going to add some support for <canvas> in some of its products, as mentioned last year by Dave Shea. There’s nothing stopping other companies writing designer-friendly authoring tools for <canvas> either.

Answer 3

I don't think you are missing anything, the idea behind HTML5 Canvas is to provide the functionality as a standard for all browsers. This is still very new in the grand scheme of things, and not necessarily a complete solution for all people.

Do keep in mind that with anything of this nature, you will probably want to use a library to interact with canvas elements if you plan on using heavy animation. Custom or third party, no need to retype code every time.

Answer 4

Canvas itself cannot replace the entire Flash development environment. The purpose of canvas is to create a cross browser standard for real time graphics, which could potentially reduce the need for Flash Player which is a 3rd party plugin. Canvas exposes somewhat low-level drawing functions, but entire libraries can be built on top of it (just like tweening libraries in Flash), and development environments can be built which compile to Javascript targeted at a canvas object (Just like the Flash authoring tool).

It's hard to say for sure, but I think the reason we haven't seen many good authoring tools for Canvas yet is because canvas is still pretty slow, lacks many features that FlashPlayer has, and there are issues of uncertainty slowing down the adoption process of HTML5 (eg. video codecs).

Answer 5

You are worried about the "code", but when using Flash AS3 you get to write a lot of code anyway.

I'm porting a small AS3 game I did few years ago to Canvas, and so far I don't see any great difference between the two. Canvas is more low level, many useful functions are missing and you have to build them, just like the box you mentioned above. Even circles are not available, but you can make a 4-5 lines function to draw a circle, so is not really an issue.

There are three issues so far where Flash is better:

• Colorizing/blending is basic (just transparent and additive are really useful) while Flash has almost any Photoshop blend mode available.

• While Flash is finally (after waiting for years) gorgeous at handling sound, the still young HTML5 audio tag is really poor so far.

• Speed. Flash is faster than canvas/JS in the same machine.

Despite this, the main browser vendors are doing their best to improve performances and features, and many issues will be addressed.

Answer 6

The Good and the Bad : Flash vs HTML5

History First

As always, it is good to get a bit of facts from history! Flash was introduced in the mid nineties by the company Macromedia. At the time, web technologies were no where close to what we have today. To be honest with you, websites back then looked like crap. One could bring websites to an all new level with the help of Flash. This is why Flash became so popular and it is what it become today : a popular complementary browser plugin.

Yet, we can see quite an impressive evolution in computing power, disk space and Internet connection speed. With that evolution came new web standards and new browsers with rich features. Of course, we came to see the life of JavaScript and CSS with time as well. The powerful trio of HTML/XHTML, CSS and JavaScript are the foundations of HTML5. New and exciting features are at the core of HTML5. I would strongly invite you to read the first chapter of HTML5 For Web Designers.

Very, Very Different

To be able to create a website with Flash components, one must have Macromedia/Adobe Flash (Macromedia was bought by Adobe). I must agree that it is possible to do great stuff with Flash, but it has became dramatically expensive! We have to ask ourselves if this software really worth the trouble...

After all, Flash components are proprietary and some would say that it breaks the open nature of the World Wide Web (WWW). In my humble opinion, Flash can easily make a website bloated because the components usually take a lot of bandwidth. Think about possible users in third world countries (there are more of them than you might think). Also, there has been several security concerns about exploits and flaws (have a quick Google search). Therefore, I always used Flash sparingly. Now, this does not mean that websites are ugly without Flash either. Have a simple look at the tons of website galleries out there like cssline for one.

On the other hand, browser technology is finally getting up to a point where it can grasp HTML5 to do what Flash has been doing for the last 17 years. We haven't seen the full possibilities of certain tags such as canvas because HTML5 will take time to mature. In fact, it is still a work in progress because it will only be a candidate recommandation in 2012 and it will be a proposed recommandation in 2022. Perhaps, you can begin to see how different Flash and HTML5 are from each other.

The End of Story

I believe that you are missing something by not knowing HTML5 and the canvas tag.

Have a look at this HTML5 vs Flash website for demos. Perhaps, you will be able to make an opinion with the help of that site (it would be best to use a modern browser such as Chrome, Safari and Opera). Please have an open mind because HTML5 is still very young compared to Flash. By the way, have you heard about something called WebGL?