Drawing pretty graphics is all very well, but in the following example, we will look at a more practical application for Canvas: a pseudo-3D chat application (Figure 6-15). This example will also demonstrate how to combine Canvas with other HTML5 features like WebSockets.
Figure 6-15. A pseudo-3D graphical chat application using HTML5 Canvas and WebSockets
Canvas has enjoyed its fair share of the HTML5 limelight, and another equally exciting (but possibly less well known) HTML5 element is WebSockets. Although this book is about graphics, it’s worth discussing why WebSockets are significant for modern web applications and how they can be integrated with Canvas.
The Web typically transmits its data between servers and client browsers using the HTTP protocol, but HTTP has certain limitations (unlike shiny new WebSockets) that make it unsuitable for high-speed, bidirectional network communication:
The client web browser requests data from the server and the server then obliges. The server cannot “push” information to the client without being asked for it specifically.
HTTP data carries a lot of baggage in the form of header information. Requesting just one byte of data can result in potentially hundreds of bytes of additional “invisible” header information also ...