HTML guru: canvas & CSS3 advances deliver sophisticated animation & drawing power

This is the third guest post by Mat Diss who is founder of bemoko, a British mobile Internet software company that aims to pioneer new ways for web designers to quickly construct better websites that can be delivered across all platforms from desktop to mobile.

Here Mat continues his series of posts that demonstrate the advantages of designing with HTML5. In this blog, Mat looks at the concept of Canvas for creation of graphics…

HTML5 provides a whole new canvas concept which allows you to draw graphics on your web page. CSS3 also brings in some great new features such as transitions – – which allows CSS properties to be changed smoothly from one value to another. For example, rotate an image when the user clicks on it.

With the combination of both the canvas and CSS3 advances, an HTML developer has a lot more power at their fingertips. This can include drawing of a button (with text generated on the fly), sophisticated animation and interactive gaming. A lot of UIs that were once the realm of platforms like flash are now are now accessible via native HTML.

The canvas example – at – draws a few gradient shaded circles when the user clicks a button. This is done with the following Javascript and HTML snippet:


<script type=”text/javascript”> <br / />
  function draw(){ <br / />
    varctx = document.getElementById(‘whiteboard’).getContext(‘2d’);    <br / />
    // Create gradients  <br / />
    varradgrad = ctx.createRadialGradient(45,45,10,52,50,30);  <br / />
    radgrad.addColorStop(0, ‘#A7D30C’);  <br / />
    radgrad.addColorStop(0.9, ‘#019F62’);  <br / />
    radgrad.addColorStop(1, ‘rgba(1,159,98,0)’); <br / />
    <br / />
    varlingrad = ctx.createLinearGradient(0,0,0,150);  <br / />
    lingrad.addColorStop(0, ‘#00ABEB’);  <br / />
    lingrad.addColorStop(0.5, ‘#fff’); <br / />
    <br / />
    var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);  <br / />
    radgrad4.addColorStop(0, ‘#F4F201’);  <br / />
    radgrad4.addColorStop(0.8, ‘#E4C700’);  <br / />
    radgrad4.addColorStop(1, ‘rgba(228,199,0,0)’);  <br / />
      <br / />
    // draw shapes  <br / />
    ctx.fillStyle = lingrad;  <br / />
    ctx.fillRect(0,0,150,150);<br / />
    ctx.fillStyle = radgrad4;  <br / />
    ctx.fillRect(0,0,150,150);  <br / />
    ctx.fillStyle = radgrad;  <br / />
    ctx.fillRect(0,0,150,150);  <br / />
  }    <br / />
</script> </p>


<div class=”content”>
  <div><button type=”button” onclick=”draw();”>Draw Something</button></div>
  <canvas id=”whiteboard” width=”150″ height=”150″>

See for quite an impressive experience built using the HTML5 canvas.

Visit the demo site at :