Experiments in HTML 5 - Part 1

Being trying out some of approaches to graphics in HTML 5. Looking to incorporate some elements into our Cyber Connect - Internet of Things & Maker hobby site redesign.  Sadly I have discovered that although HTML 5 offer tantalizing possibilities there is still a long way to go still for HTML 5 to deliver on all it promises. My take-away: HTML 5 is too slow and support to fragmented to be of much use right now. Its a pity because HTML 5 is great.

HTML 5, CSS 3 and Javascript Training

With HTML 5 and CSS 3 you can add animation to your site easily, while the new API's introduced by HTML 5 allow for the creation of full-client side web applications that are dynamic and persistent.

Check out our HTML 5 & CSS training course or our JavaScript course for web application developers.  

HTML 5 Graphics - More than one way but none complete

There are 4 ways to do graphics in HTML 5 that I am aware of:

1) Dom+CSS
2) SVG
3) Canvas
4 Web GL

This over-abundance of solutions means there is a steep learning curve ahead of anyone who would master HTML 5 graphics. Each approach offers only a partial solution and each overlaps at least one of the others for significant portions of functionality with little to suggest why one solution was introduce when the other existed. 

  • WebGL vs Canvas,
  • DOM/CSS vs SVG, 
  • SVG vs canvas. 

There are some situations which favour one approach above the other, but you end up having to combine elements of several approaches to get a complete solution. Performance and support is erratic between browsers. Just tried firefox and chrome. Can only imagine the pain for mobile. 

Trying to figure out which approach is more perfromant is another quagmire. Is it using graphic acceleration? Hows do the different approaches affect the rendering engine? This differs between browsers as well it appears.

Got some more experiments line up. its fun but frustrating :)

See the Pen Artificial Intelligence - An experiment in HTML 5 Graphics by Mark Clarke (@mxc) on CodePen.