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?
The animation is nice and smooth with a couple of nice effects. Flash, get your coat, your number is (almost) up!
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
Related demos