Parallax scrolling

fiddle.js

window.onload = init;

function init(){
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    canvas.width = 400;
    canvas.height = 400;
    
    var ctx = canvas.getContext('2d');
    
    var elapsed = 0;
    var start = new Date();
    var last = new Date();
    var angle = 0;
    var radius = 50;
    
    var loop = function(){
        var now = new Date();
        var dt = now - last;
        elapsed +=dt;
        last = now;
    
        ctx.fillStyle = '#E6E6E6';
        ctx.fillRect(0,0, canvas.width, canvas.height);
        
        if(elapsed > 10){
            angle+=1
            if(angle > 360) angle = 0;
            elapsed = 0;
        }
        
       
        var  _angle = angle * Math.PI / 180 - Math.PI/2;
        x = Math.cos(_angle)*radius + canvas.width/2;
        y = Math.sin(_angle)*radius + canvas.height/2;
        ctx.fillStyle = 'red';
        ctx.fillRect(x-120, y-120, 240, 240);
        
        ctx.fillStyle = 'yellow';
        ctx.fillRect(canvas.width/2 - 20, canvas.height/2 -40, 40,80); 
        
        ctx.fillStyle = '#FF0000';
        ctx.beginPath();
        ctx.moveTo(canvas.width/2, canvas.height/2);
        ctx.lineTo(x,y);
        ctx.stroke();
        ctx.closePath();
    };
    
    setInterval(loop, 1000/60);
}

Click here to run on jsfiddle