HTML 5 Canvas Animation

As canvas comes closer and closer to replicating the features of Flash; canvas-based cartoons are beginning to appear. Starting with this one, featuring two characters called Tomte and Goat; who explain how you can make your own cartoons in canvas!

A taste of things to come?

A taste of things to come?

The animation is nice and smooth with a couple of nice effects. Flash, get your coat, your number is (almost) up!

View the HTML5 Canvas Animation cartoon

Info

Type:
Applications, Cartoons
Posted on:
October 9th, 2009
Posted by:
Andi Smith
Views:
78554

Rating

3.27

Your Rating:
1 Star2 Stars3 Stars4 Stars5 Stars

Works on

BETA Please let us know if you find HTML 5 Canvas Animation works in other browsers by leaving a comment below.

Comments

Gunith

Awesome stuff! Great work!! N funny too

Am gonna try too

Posted on November 17, 2009

dilipthota

wonderful very interesting too!!

Posted on November 19, 2009

FTeR

flash is a battery killer platform, but this little demo (with very limited animation) eats up one of my core, i wonder what would happen with a single core system.

also this has raster graphic while flash can have vector graphic to.

Posted on January 28, 2010

FTeR

Works on: firefox 3.5.7, chrome 3.195.38, safari 4.0.6 and some of it on opera 10.10 (its only animates the characters).
In IE it displays a chrome frame ad…
I let you know ;)

btw, this level of animation can be done in html4 with reasonable cpu usage, using js or with the webkit animation extensions with even less resources.

Posted on January 28, 2010

tukaram

hey thats really great but teach me some basic animation in HTML 5…!

I wanna design a simple preloader for ma website plz….!
I spent over a week with HTML(canvas) and Javascript…
but result in vain…plz do help

thank u in advance…

Posted on February 17, 2010

okly

50 pages of code and hundreds of kilobytes…
It will take 5 minutes to do that in flash in 20Kb with a way better performance.
Nice test, but this become annoying when funboys come into place…
Dudes you cuold do the same 10 years ago with dhtml.

Posted on April 22, 2010

noodles

That’s over 2000 lines of code. I don’t think that is what the canvas tag is made for. Interesting user interactions and data visualization .. yes .. story telling .. no.

Definitely cool that they made this but I hope they get back to doing real work cause they are obviously talented devs.

Posted on April 24, 2010

ryan

Holy cow, its like flash v.1 from 1999, only crappier! And no sound! Saying html 5 is a flash killer is like saying a cup and ball is going to kill the sony playstation. Aint gonna happen.

Posted on April 30, 2010

BB

Is this going to replace Flash??
For heaven’s sake, do something impressive.
This is embarressing…

Posted on May 3, 2010

zach

“The animation is nice and smooth with a couple of nice effects. Flash, get your coat, your number is (almost) up!”

Really? I give the developer all the credit in the world for making this, but this is far from competing with flash in any way. Over 2000 lines of code and on my works iPad it plays at @3.4 fps … it’s not like the graphics or the animation are pushing any envelopes here.

If anything this just proved to me that HTML5 will not be replacing flash anytime soon.

Posted on May 3, 2010

Mike Cope

Wonderful animation test using a technology other than Flash. Ran fine on my desktop, but my iPod Touch grounded to a halt from the get-go.

Look forward to seeing this develop!

Posted on May 4, 2010

Newman

There has been a lot of talk within the last year or two that HTML5 is almost here and it’s funny…ever since Steve Jobs wrote that “No flash on iPhone, iPad etc” letter a couple of days ago, all I have been hearing from people, mostly all web developers and Mac fanboys, is “HTML5 is will destroy Flash very soon”, “Flash is dead” and “Flash is a piece of crap in every way compared to HTML5″ yet I haven’t found one site that has done anything remotely cool. Is there anything out there created in HTML5 that is truly amazing graphically?

Posted on May 4, 2010

Andi Smith

Hi Newman,

HTML5 doesn’t have to be considered as a Flash replacement, both technologies have their individual strengths and can work together to produce even more exciting and dynamic websites. I think the decision behind using HTML5 or Flash on a project should be done on a case by case basis.

Obviously, platforms like the iPad are forcing developers hands if they wish to make something “Flashy”, but I think the most interesting projects will follow when developers stop trying to replicate Flash and start focussing on the strengths of the technology.

Perhaps you’d like to take a look at our Top 100 canvas demos for some more examples of what can be done?

Thanks for visiting the site,
Andi

Posted on May 4, 2010

prathamesh

I have a personal portfolio website ( http://www.prathamesh.info ) that I had done entirely in flash after studying a few tutorials. If Flash support reduces how do I make a website compatible with html5? What is the future for all the efforts that I took designing a website?

Posted on May 5, 2010

Andi Smith

Hi prathamesh,

I don’t think you have anything to worry about at the moment – Flash support on mainstream browsers isn’t going anywhere yet. 98% of Internet users are currently on Flash 9 or above (see Adobe’s own statistics).

From a business point of view, it’s important to provide an accessible version of your site for people who do not have Flash installed or are using an iPhone – this may be as simple as a HTML page with a paragraph about your portfolio and a contact address.

I don’t think you need to worry about rebuilding your site in Canvas any time soon, although if you want to give it a try don’t forget to submit it to Canvas Demos afterwards!

Thanks for your comment,
Andi

Posted on May 5, 2010

prathamesh

Hi Andi,

Thanks a lot…Its a bit assuring…I am definitely quite excited about the development of HTML5…Looking up for further advances…

Regards,
Prathamesh

Posted on May 9, 2010

Colby

Great effort, and I’m sure this took a long time to make, but WYSIYG tools are going to be required so true artists and animators can create smooth, fluid animation with HTML 5. Coding animation kills the character of it, and results in this type of robotic, stiff animation.

Posted on May 27, 2010

Vassil

Works on Google Chrome 4.1

Posted on June 1, 2010

Vassil

Works on iPhone safari but it is slow

Posted on June 1, 2010

Vassil

Only background seen and subtitles. Characters are not seen on HTC Desire Android 2.1.

Posted on June 2, 2010

mmedia

Flash gone by Steve Jobs? Well the iphone and ipad are great innovations but no flash on it…. Will not be an issue. Firefox will be releasing app fixes for both shortly with flash ready capability. So Steve get off your high horse, kiss and make up with adobe and get in touch again with your core clients… Designers. Designers prefer Flash. Their clients love what it can do without the expense of download speed CPU usage. There are 100s of thousands of expensive flash sites out there… Google is soon able to read dynamic flash content for SEO. HTML5 is a pathetic attempt to reproduce what flash can do in a fraction of the time. Tons of code security. etc. etc. etc. and YES they are trying to do what Flash can do… they are trying and failing.
Now One Last word for Steve Jobs:
Please come back from the dark side. first the intel-chip set forcing everyone to buy a new system if they need the latest software. Price gouging for outsourced hardware and now this. making flash a thing of the Past? The force is strong with this one “but now you will die” Lucas don’t sue me for that one.

Posted on June 2, 2010

JC

I’m with you mmedia, I think jobs has to do a 180 on the Flash deal, even with it’s latest security flaws (they will soon be fixed). Looking at this animation almost made me $hit myself. It’s like Steve wants to send multimedia on the web back 13+ years. Finally Apple gets a decent market share and turns into Microsoft, trying to dictate the market? Apple was kept alive by designers, ad agency’s and Adobe. Imagine if Adobe and Macromedia stopped making Photoshop, Premier, Dreamweaver, Flash and After Effects for the mac 10 years ago. We probably would have all switched to PC’s. And if you think it’s so flawed, why support it on your OS X?

Posted on June 7, 2010

dirk

sorry, but I hope this animation is not a good example of what HTML 5 is going to deliver. This you could make with the basics of the basics of Flash in 5 minutes.

Posted on June 9, 2010

Ken01450

I have to say [MMedia] has made a great point. And t will take years before HTML5 can do what flash is doing today and as the years go by Flash will improve faster than HTML5.
I was doing this type of animation using DHTML and Adobe GoLIve TIMELINE… LONG AGO, and found CPUs were FREAKING OUT…

I can see some usefull aspects of the Canvas API but most designers will not code willingly, and will require a GUI to implement… which I’m sure Dreamweaver Developers are working on NOW.

Posted on June 11, 2010

ghostface

did adobe release this to put people off getting into canvas?

Posted on August 12, 2010

Marcel

This is not something you can talk about :) As someone said above, it looks like something you could so with Flash (in 1999) or with DHTML.

Is it me or they want to make Flash look bad? Anyway, they aren’t doing a good job at this because these canvas projects aren’t so impressive after all.

Posted on August 18, 2010

Dan

wtf? im 16 and im sure i can make better animation with my ass than this one (using canvas too)

Posted on October 7, 2010

Om

You call this smooth animation mate? A flash killer? Don’t make me laugh!

Posted on October 10, 2010

pitt66

Wow, that was a big one! Especially as it comes to CPU usage. On my Mac 2.2 GHz Core2 duo using Firefox 3.6 it consumed 70%-90% of CPU (!) and only hands were animated + some chit-chat bubbles. Embarrassing. I thought Flash animations were hogs… nope, in comparison, those cpu hungry flash animations were simply over-blown, too much things moving around. I don’t even want to think what cpu usage would be in htm5 if those over-blown anims were re-written in html5.

Posted on October 29, 2010

DavidM

The canvas still has some way to go but it’s getting some serious support for web designers. They all seem to be using the canvas for text. I don’t think Adobe is concerned about anything as they’ll likely be the people putting out the HTML 5 software, like Dreamweaver and Flash with HTML 5 export.

Posted on December 16, 2010

Gerardo

It works nice in safari

Posted on January 4, 2011

Nico

nice step for the html5.it’s a good improvement for basic website but flash has more capabilities in animation than this simple anim using canvas.

Posted on March 7, 2011

Derek

I’m looking to just animate some gauges (turn a needle). The first version was done in flash and I’m excited to do it in HTML 5 so that the ipad and other devices can access the data. This tutorial let’s me know it’s possible. Not great for telling stories, but I think it will work great in my application.

Posted on May 11, 2011

317

Muchos thanks, your animation made me laugh AND got me the answer I needed !

Posted on June 18, 2011

Tanweer Khan

Wow!! Its very creative. I really liked the animation. :)

Posted on July 8, 2011

raindev

Forbidden

You don’t have permission to access /u/ilmarihe/canvas_animation_demo/mozcampeu09.html on this server.

Posted on July 27, 2011

kevin benjamin rout

when i click on the view code it says forbidden. I am very interested to do animation.I study in satndard 3. I do lot of a cartoon drawings and i want to animate them. Pls help.

Posted on July 31, 2011

Craig Ackermann

Ja, also getting the forbidden message :(

Posted on August 11, 2011

Tarun Agarwal

Forbidden
You don’t have permission to access /u/ilmarihe/canvas_animation_demo/mozcampeu09.html on this server.

——————————————————————————–

Apache/2.2.14 (Ubuntu) Server at http://www.cs.helsinki.fi Port 80T

Posted on September 24, 2011

Tarun Agarwal

I really wanna see it I dont like flash want to replace my websites using this please email (tarun_agarwal_11@hotmail.com ) me some links to learn animation .. also i get this error.

Forbidden
You don’t have permission to access /u/ilmarihe/canvas_animation_demo/mozcampeu09.html on this server.

——————————————————————————–

Apache/2.2.14 (Ubuntu) Server at http://www.cs.helsinki.fi Port 80T

Posted on September 24, 2011

Khurram Raheel

Hi Guys!,

I am a web developer and I can devlop Cartoons like Scooby Doo, Tom and
Jerry and others in Canvas, Can anyone tell me whether this is a right way to go for developing games in HTML5 using javascript, I am a student and I am so confused about web and new emerging technologies

Thanks

Posted on September 24, 2011

lectmymn

purchase louis vuitton knockoff handbags OntWLULO [URL=http://lvdiscount.surftownlabs.se/]louis vuitton outlet[/URL] for more tejgXdta http://lvdiscount.surftownlabs.se/

Posted on January 9, 2013

直営 ダッフルコート 推薦

Its like you read my mind! You seem to know so much about this,
like you wrote the book in it or something. I think
that you could do with some pics to drive the message home a little bit, but instead of that,
this is wonderful blog. A fantastic read. I’ll certainly be back.

Posted on December 21, 2013

Add comment

(required)
(required)
(will not be published)
(required)