I don't want to review the book itself (just two word: is ok) but reading it lead me think about "how Canvas can change the Web in future".
First of all: I found all the HTML 5 Canvas feature interesting, but while reading the book I felt a sort of deja-vu. Every time I run one of the given example about drawing and painting, it was like I had already see it on a Web browser...
No, I'm not talking of Flash (I never had any experience with that) but about Java Applet! Yes, I really said "Java Applet"!
When I started Web development 10 years ago applet was "cool" because you were able to do a lot of stuff impossible to to with pure HTML +
Now using canvas you can do (again) a lot of drawing work, but still: how can this be useful to Web users?
HTML 5 Canvas: The Good PartI was not able to find every answers myself, so I asked to Twitter and I get back some useful feedback..
- Graphs and Histograms. We have a lot of powerful graph generator for server side languages, that can create images on the fly, but we can now stop query a remote server for that (remember that HTML 5 means also "bein offline").
- File handling and preview. As HTML 5 is able to manage files, and canvas can also manage some type of media like images, audio and video (see below), plugins like jQuery File Upload are now possible.
HTML 5 Canvas: The Super Fancy Cool PartFirst of all: video!
This can be sum in a simple sentence: canvas can handle a video like it were an image. What does it means? You can draw the current video frame (taken from a standard HTML video element) inside a canvas; write the current video frame every 20 milliseconds and you are really playing the video inside it.
Why is this cool? I can already see a video element inside my HTML... so?
The great part is that you can draw a video frame inside the canvas then draw other stuff on the top of it! You can add comments and images on the running video! Wow!
And now the best part: HTML Media Capture API.
And after that? Can I upload my work to a server? Yes!
Playing with this new toy I spent some times developing a new Plone add-on: collective.takeaportrait. This sum all the stuff I learned about media capture and video manipulation:
- If the browser support getUserMedia call, a new button appear
- The button will open an overlay where the webcam output is displayed
- A viewfinder with the standard Plone ratio for user's portrait and a countdown are drawn over the streaming video
- Use can save a photo and send it to the server for replacing the current portrait
Now the bad news (also reported in the Fulton & Fulton book): there's no support for those features inside mobile devices right now. Really sad.