HTML5 Canvas Overview
The "canvas" tag allows you to embed script based graphics, usually JavaScript, in your page. The Filamant Group blog has an excellent writeup and they also provide a jQuery based charting script: http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/.
For $80, the RGraph Beta is available: http://www.rgraph.net/. For custom visualizations, Mozilla provides an excellent canvas tutorial: https://developer.mozilla.org/en/Canvas_tutorial. For neat animations check out: http://jeko.free.fr/megapong/ and http://code.google.com/p/cakejs/
Why this is a Big Deal
HML5 is a big deal because it provides a standards based alternative to Silverlight, Flex and JavaFX. Expect the leading Ajax frameworks, like JQuery and GWT, to provide programmer friendly APIs for common visualizations. I was unable to find a good canvas visualization designer, but I do believe that we will see several in the coming years. Also, I expect canvas support on mobile devices even if Microsoft refuses to support it in IE. It looks like Firefox, Chrome, Safari and Opera already support canvas. And, I fully expect IE market share to continue to decline making it more likely for IE to suck it up and support HTML5 properly: http://www.w3schools.com/browsers/browsers_stats.asp.
Key Missing Ingredients
The missing ingredients for a HTML5 revolution are:
- IDE Tooling - A killer HTML5 IDE that rivals Adobe FlashBuilder and Microsoft Expression is needed. Unfortunately, neither Microsoft or Adobe has an incentive to innovate here.
- Framework Support - jQuery, GWT and other leading Ajax frameworks need to make it easy for programmers to build nice canvas based visualizations. I see significant movement here and I do believe that this will happen.
- Blogs, Books and Success Stories - Programmers need to blog about HTML5, good books are needed on HTML5 for mobile/desktop and noteworthy success stories will round out the triple threat.
Posts
16 comments:
You're wrong. HTML5 isn't the killer standard for business because of the canvas. Canvas is so slow in all browsers that implement it, that you can't realistically put anything else then static graphics into it (except if you figure out schemes to only update teensy tiny portions of it at a time).
Though I think you're right to be excited about html5, for the business. Here's why:
* video, ever needed to embedd video in your page and this flash/RTSP stuff was always a drag...
* audio, add audio to your page including whatever playback controls you find suitable
* @font-face: you know how web/user interface designers can be, they're fanatic about their fonts. now you can make them happy.
* client side databases: Do more stuff on the client (as has been the trend in webapps) and now persist it too, makes the user-interaction more snappy.
* manifest files: Run your webapp weather your user is connected or not, no more argument to kill your app just because it should run on a laptop that's not always in the net.
* javascript workers: javascript threads
* XMLHTTPRequest onprogress events
* Javascript access to file-upload fields content, no more page-change required to upload files (and no flash and hidden iframes).
* datagrid element: finally no more stupid hacking around with javascript in order to get interactive trees/tables
* Drag&Drop support in/out of your web application from other pages or desktop apps.
* Copy&Paste support
Florian, you're wrong (nice way to start a post huh?).
Canvas performance is pretty good in the browser that support it. Performance would not be a problem for the solutions that James provided.
Here is a canvas chart demo that even supports IE (via VML):
Canvas charts using jQuery
Other links to test Canvas performance in browsers:
. Ball pool
. Canvascape
@Pepe
Unfortunatly it's you who's misstaken.
1) The Charts example doesn't redraw often (therefore is not relevant to demonstrate that canvas is usable for realtime graphics)
2) The ball example only updates a teensy tiny portion of the canvas at a time (where the ball is). Regardless, the Ball example also pauses every second for about 300ms, not a very smooth animation by any long stretch.
3) Canvascape runns at a Frame-Rate of about 0.5 FPS on my intel quad core 2.5ghz extreme, 4GB Corsair XPS memory)
In summary, no, canvas update speed is crap.
@Florian
Canvas animation is more than smooth here on both demos on my dual core 2.53 Ghz with 1 gig ram.
You might want to call your computer vendors support hot-line and ask them how to install drivers for your graphic card.
@Pepe
Graphics card driver is installed appropriately.
Section "Device"
Identifier "Videocard0"
Driver "nvidia"
VendorName "NVIDIA Corporation"
BoardName "GeForce 8800 GTS 512"
EndSection
OpenGL works at 200FPS on scenes with 500k primitives and Flash runs smooth.
Clearly this is a canvas problem, not a problem of my computer.
@Pepe
While I agree that canvas is a huge and needed step forward, it's slow. It's so slow that it doesn't belong to this age.
If they don't fix this, it will be an interesting start that will take years to reach something useable -except for static graphics as Florian said or just minor uses-.
We need a canvas, we need more functionality on it, and we need it to be a component that, if it's unable to lead the way -as it should be expected from somthing with 0 legacy to support- at least not be worse than the existing solutions.
Canvas is slow, right now. That will be fixed over time, as it is an implementation issue, not a fundamental issue. It is always brand new... and first implementations aren't always speed demons (see: JS, CSS early on versus now).
I think the focus needs to be on what it can do, the tools it exposes. I think we can safely assume that huge performance improvements are coming, as well as the ever-uphill climb of hardware specs.
I wouldn't say that canvas is brand new. Firefox had it since version 1.5 (could not confirm if 1.0 had it too). That was 4 years ago.
I assume that everybody here are testing with version 3.5 right (TraceMonkey JavaScript engine)?
I always see people quote W3C browser stats... but those stats are for visitors ONLY to the W3C website, not for the internet as a whole. (There is text on that very page indicating that.) Net Applications is the best resource for browser stats.
Key missing ingredients?
1. Yes, and IDE
2. More than one language support
3. THREADING
4. Modern language features
5. Server & client code reuse
6. Integrated data strategy
Quite simply, it's lipstick on a pig... it's time to move on.
Of course, the people that want this the most, are the people that don't know why these things are important.
But then again, some people don't think men should fly in airplanes, or the earth is 6,000 years old... go figure.
@Dewey
You can always use GWT if you feel that JavaScript is too messy. You can achieve great results using Java without writing one single line of JavaScript.
HTML 5 is here to stay, whether you like it or not.
When it comes to most business applications, speed is not the number one concern. But, canvas will need to be responsive enough and I do not know if that's the case right now. Most business applications are not gamer grade. That is one reason why Java dominates despite its slowness. And, Java performance has improved so much over the years that it is no longer a valid argument against adoption. Also, the dominant canvas alternative, Flash, has its own performance challenges. And, the MXML compile time is way too slow. Flex apps are not known to be the most responsive/best performing thing out there, but Flex/Flash is on a path to become the enterprise platform for RIA. So, while I agree that canvas may not be ready for gaming implementations it will work well in enterprise applications. And, as browser implementations improve, the performance concerns will melt away the same way they have with Java.
@PePe, there are some nice things you can do with JS Extensions, and I know that the speed of the Canvas will be fast.
Unfortunately, if you frame the argument that way, you can't see the reason it doesn't matter.
The code I have on the server is a MIRROR of the code I have on the client. You don't seem to see how important that is, and I'm even ommitig the fact that my client code is running about 10 times faster.
People though CP/M would win, they thought the Mac would win, it couldn't even beat DOS.
They thought these things because they didn't get the question right, so they were solving the wrong problem.
The Canvas ISN'T the solution, it's just a component. Try to remember that when you have to learn how to program in either Flex or Silverlight to be competitive.
Thanks for the link. The Filament Group article was just updated today with a new version of the charting library.
You can find it here:
http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/
ITSolusenz departments manage all components web application, software development including, Application Development Company, software development company india, Software Development Services.
FWIW, I've altered the license slightly for RGraph and made it free for non-commercial use (ie personal, charity, educational).
Post a Comment