HTML5 clock

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <meta charset="utf-8" />
        <style>
            #sekunde {
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="300" height="300">Upgrade your browser!</canvas>
        <script>
            var fps = 60;
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var time = new Date();
            var hour = 0;
            var min = 0;
            var sec = 0;

            function frame(){
                setTimeout(frame, 1000 / fps);
                calc();
                window.requestAnimationFrame(render);
            }

            function calc(){
                time = new Date();
                hour = time.getHours();
                min = time.getMinutes();
                sec = time.getSeconds();
            }

            function render(){
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.save();
                    ctx.translate(canvas.width / 2, canvas.height / 2);
                    ctx.rotate(-Math.PI / 2);
                    ctx.beginPath();
                    ctx.arc(0,0, 100, 0, Math.PI * 2);
                    ctx.closePath();
                    ctx.stroke();
                    ctx.save();
                        ctx.rotate(Math.PI / 6 * hour);
                        ctx.fillRect(0, -3, 40, 6);
                    ctx.restore();
                    ctx.save();
                        ctx.rotate(Math.PI / 30 * min);
                        ctx.fillRect(0, -2, 80, 4);
                    ctx.restore();
                    ctx.save();
                        ctx.rotate(Math.PI / 30 * sec);
                        ctx.fillRect(0, -1, 95, 2);
                    ctx.restore();
                ctx.restore();
            }

            frame();
        </script>
    </body>
</html>