Canvas Logo with Animation

This demonstrates HTML 5 Canvas, which uses JavaScript to render graphics and animate the logo.

by Brian von Konsky

HTML

<!-- Business Web Technologies     -->
<!-- School of Information Systems -->
<!-- Curtin University             -->

<!-- SVG defines vector based graphics elements -->

<!-- Canvas provides a background into which JavaScript can draw -->
<canvas id="theCanvas"  width="100" height="100" style="background: blue">
</canvas>

JavaScript

// Get the elelment and the context
var canvas = document.getElementById("theCanvas");
var context = canvas.getContext("2d");
var angle = 0;

function animate () {
   // Clear the entire background to start the next frame
  context.clearRect(0, 0, canvas.width, canvas.height);
   
   // Draw a circle
   context.beginPath()
   context.arc(50, 50, 45, 0, 2.0*Math.PI, false);
   context.closePath();
   context.fillStyle="yellow";
   context.fill();

   // Draw a rectangle
   context.fillStyle  = "green";
   context.fillRect(10, 40, 80, 20); 

   // Remember the current transformaiton settings
   context.save();
   
   // Set transformation to rotate about the center
   context.translate(50, 50);
   context.rotate(angle * Math.PI / 180);
   context.translate(-50, -50);
   
   // Draw a polygoon
   context.fillStyle="red";
   context.beginPath();
   context.moveTo(50, 0);
   context.lineTo(100, 100);
   context.lineTo(50, 50);
   context.lineTo(0, 100);
   context.closePath();
   context.fill();
   
   // Restore the roignal trnasformation settings
   context.restore();
   
   angle += 1 ;
   if (angle >= 360) {
      angle = 0;
   }
   
   setTimeout(animate, 55);
}

animate();