Thursday, September 19, 2013

HTML5 Canvas GUIs

The HTML5 Canvas is an excellent graphics platform for creating portable graphics. It supports hardware graphics acceleration, where available, and it doesn't even have to be hard to code.

Recently, we've been building GUIs for embedded devices, and with HTML5 being clearly a technology on the ascendancy, we wanted to use web technologies for our embedded demonstrator. Obviously performance was a question, so we decided to work entirely on the HTML5 Canvas element, as used in many graphics-intensive web games.

So how does a HTML5 Canvas approach compare to the more usual approach. Let me show you a short example, where first we create an app using HTML / CSS /JS - the traditional way. The other example is a similar app, built on the GUI library we created on HTML5, in pure JavaScript.

The app simply animates five icons across the screen, repeating infinitely.
The first part of any HTML app is the HTML. Here we declare the image items that we will animate

<body onload="someFunction();"> <img height="64" id="anima" src="png/a.png" width="64" /> <img height="64" id="animb" src="png/b.png" width="64" /> <img height="64" id="animc" src="png/c.png" width="64" /> <img height="64" id="animd" src="png/d.png" width="64" /> <img height="64" id="anime" src="png/e.png" width="64" /> </body>
Then the CSS. We define the animation that will be shared by all img elements
@-webkit-keyframes move
   0% { -webkit-transform: translateX(0px); }
   100% { -webkit-transform: translateX(500px); }

 -webkit-animation-name: move;
 -webkit-animation-duration: 5s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-fill-mode: forwards;
 position: absolute;

Finally, the JavaScript part, where we first find the img elements we wish to animate, then assign the style we need.

function someFunction()
 items.push( document.getElementById('anima') );
 items.push( document.getElementById('animb') );
 items.push( document.getElementById('animc') );
 items.push( document.getElementById('animd') );
 items.push( document.getElementById('anime') );

 for( var i = 0; i < 5; ++i )
  items[i].className = items[i].className + " anim";
  items[i] = ""+(70 * i)+"px";
  items[i].style.left = "10px";

As you can see, this involves three snippets of code. Now, HTML5 Canvas GUI coding doesn't have to be hard. Not when there is a bit background work done. Check this out.

function initApplication()
 var btns = [];
 var btn_paths = ["a.png", "b.png", "c.png", "d.png", "e.png" ];

 for( var i = 0; i < btn_paths.length; ++i )
  var btn = new ItemDecorator( 0,i*70, 64, 64, btn_paths[i] );
  addItem( btn );
  var anim = new AnimMove( btn, 500, i*70, 5000 );

Here we've created the exact same animation using a decorator item in our widget library. As you can see, the amount of code is less than a third of the traditional way. And the code is very easy to read.

That was a quick look into full-canvas web GUIs. Stay tuned for examples and more.

Mikael Laine, SW Specialist - Ixonos


  1. It's great to read your great insight into this important topic and I'm looking forward to more great posts from you. You made my beauty article a lot of fun, so thank you a lot. Thanks a lot for your help! A wonderful article is on the way. buy YouTube Views cheap

  2. HTML5 is a language that can used for structuring content on the web.
    We provide Respite Care for Elderly In Villages, Florida for the people who are suffering from serious disease.

  3. HTML5 is the latest version of the Hypertext Markup Language (HTML), which is the standard markup language used to create web pages and web applications.If any one wants to buy a research proposal service.You can easily make a call and feel free to contact with our team.

  4. Using HTML5 Canvas for GUIs simplifies development significantly. By leveraging a GUI library, code becomes concise and readable, offering a streamlined approach to animation. Exciting prospects for future development!
    Collaborative Divorce New York