Edit in JSFiddle

var height = 600; var width = 400;
var canvas = ctx = false;
var frameRate = 1/40;
var frameDelay = frameRate * 1000;
var loopTimer = false;
var lastTime = false;

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function( callback ){
            window.setTimeout(callback, 1000 / 60);
        };
})();

var pendulum = {mass: 100, length:500, theta: (Math.PI/2) - 0.05, omega: 0, alpha:0, J:0};
var setup = function() {
    pendulum.J = pendulum.mass * pendulum.length * pendulum.length / 500;
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    
    ctx.strokeStyle = "black";
    ctx.fillStyle = "gold";
    
    // loopTimer = setInterval(loop, frameDelay);
    lastTime = new Date();
    requestAnimFrame(loop);
}
var loop = function(time) {
    var deltaT = (time - lastTime.getTime()) / 1000;

    /* 
    When switching away from the window, 
    requestAnimationFrame is paused. Switching back
    will give us a giant deltaT and cause an explosion.
    We make sure that the biggest possible deltaT is 50 ms
    */

    if (deltaT > 0.050)
    {
        deltaT = 0.050;
    }
    deltaT = 0.01;

    time = new Date(time);

    /* Velocity Verlet */
    /* Calculate current position from last frame's position, velocity, and acceleration */
    pendulum.theta += pendulum.omega * deltaT + ( 0.5 * pendulum.alpha * deltaT * deltaT );

    /* Calculate forces from current position. */
    var T = pendulum.mass * 9.81 * Math.cos(pendulum.theta) * pendulum.length;

    /* Current acceleration */
    var alpha = T / pendulum.J;

    /* Calculate current velocity from last frame's velocity and 
        average of last frame's acceleration with this frame's acceleration. */
    pendulum.omega += 0.5 * (alpha + pendulum.alpha) * deltaT;
    
    /* Update acceleration */
    pendulum.alpha = alpha;

    var px = width/2 + pendulum.length*Math.cos(pendulum.theta);
    var py = 50 + pendulum.length*Math.sin(pendulum.theta);
    
    
    // Start drawing
    ctx.clearRect(0,0, width, height);
    // Draw bar for Pendulum
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(width/2, 50);
    ctx.lineTo(px, py);
    ctx.stroke();
    ctx.closePath();
    ctx.fillStyle ='beige';
    // Draw pendulum
    ctx.beginPath();
    ctx.arc(px, py, 30, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();
    
    // Draw clock face
    ctx.fillStyle = 'beige';
    ctx.beginPath();
    ctx.arc(width/2, 100, 80, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();
    
    // Draw hour hand
    
    var ang = (time.getHours() % 12) + (time.getMinutes()/60);
    ang *= 30 * Math.PI/180;
    ang -= Math.PI/2;
    ctx.fillStyle = '#666';
    ctx.beginPath();
    
    ctx.moveTo(width/2, 100);
    ctx.lineTo(
        width/2 + 40*Math.cos(ang+0.06),
        100 + 40*Math.sin(ang+0.06)
        );
    ctx.lineTo(
        width/2 + 50*Math.cos(ang-0.06),
        100 + 50*Math.sin(ang-0.06)
        );
    ctx.closePath();
    ctx.fill();
    
    // Draw minute hand
    var ang = time.getMinutes() + (time.getSeconds()/60);
    ang *= 6*Math.PI/180;
    ang -= Math.PI/2;
    ctx.fillStyle = '#999';
    ctx.beginPath();
    
    ctx.moveTo(width/2, 100);
    ctx.lineTo(
        width/2 + 60*Math.cos(ang+0.03),
        100 + 60*Math.sin(ang+0.03)
        );
    ctx.lineTo(
        width/2 + 70*Math.cos(ang-0.03),
        100 + 70*Math.sin(ang-0.03)
        );
    ctx.closePath();
    ctx.fill();
    
    // Draw second hand
    var ms = Math.round(time.getMilliseconds() / 250) / 4;
    var ang = time.getSeconds() + ms;
    ang *= 6*Math.PI/180;
    ang -= Math.PI/2;
    ctx.strokeStyle = '#CCC';
    ctx.beginPath();
    ctx.moveTo(width/2, 100);
    ctx.lineTo(
        width/2 + 70*Math.cos(ang),
        100 + 70*Math.sin(ang)
        );
    ctx.stroke();
    ctx.closePath();

    lastTime = new Date();
    requestAnimFrame(loop);
    
}
    
    setup();

<canvas id="canvas" height="600" width="400"></canvas>

canvas {
                display:block;
                margin:0px auto;
                height:600px;
                width:400px;
                border:none;
            }