SIMPLE HTML5 ANIMATION

No flash used, super simple animation of rotating box

by gjmiles

HTML

<body>
        <canvas id="canvas" width="200" height="200">
            This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>
    </body>
<p>Gregory John Miles</p>

CSS

canvas {
    border: 1px dotted black;
}

JavaScript

init();

function init(){
    beware();
    setInterval(beware,120);
}

function beware(){
    
var my_canvas = document.getElementById('canvas');
var context = my_canvas.getContext("2d");
context.clearRect(0,0,200,200);

context.beginPath();
context.arc(100,100,100,0,2*Math.PI);
context.stroke();

context.save();
context.translate(100,100);

var time = new Date();
 
context.rotate( ((2*Math.PI)/60) * time.getSeconds() + ((2*Math.PI)/60000) * time.getMilliseconds() );

context.fillStyle = "#DC143C";
context.fillRect(-50,-50,100,100);

context.fillStyle = "#8B008B";
context.font = "20px Garamond";
context.fillText("Beware",-40,-55);
context.fillText("The Square",-55,70);
context.restore();

}