var canvas = document.getElementsByTagName('canvas')[0];

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var ctx = canvas.getContext('2d'),

cx = -100, 

cy = canvas.height / 2, 

r = 100, 

R_MAX = 400;

​

ctx.fillstyle = '#000';

var goingright = true;

var zooming = false;

​

function draw() {

    if(goingright) {

        cx += 4;

    } else if(zooming) {

        r += 4;

    } else {

        cx -= 4;

    }

​

    ctx.clearRect(0, 0, canvas.width, canvas.height);    

​

    ctx.save();

​

ctx.beginPath();

ctx.moveTo(0, 0);

ctx.lineTo(context.canvas.width, 0);

ctx.lineTo(context.canvas.width, context.canvas.height);

ctx.lineTo(0, context.canvas.height);

ctx.closePath();

ctx.arc(context.canvas.width / 2, context.canvas.height / 2, 50, 0, Math.PI*2, true);

ctx.closePath();

ctx.fill();

​

    /*ctx.beginPath();

    ctx.moveTo(0, 0);

    ctx.lineTo(canvas.width, 0);

    ctx.lineTo(canvas.width, canvas.height);

    ctx.lineTo(0, canvas.height);

    ctx.closePath();

    ctx.moveTo(cx + r, cy);

    ctx.arc(cx, cy, r, 0, Math.PI*2, true);

    // check if to draw a fixed circle, every 200 pixels for 100 pixels

    if(goingright && cx % 200 < 100) {

        ctx.moveTo(cx - cx % 200 + r, cy);

        ctx.arc(cx - cx % 200, cy, r, 0, Math.PI*2, true);

    }

    ctx.closePath();

    ctx.clip();*/

​

    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.restore();

    // when the circle is on the right side, go left

    if(cx > canvas.width + r * 1.8) {

        goingright = false;

        if(r == 100) {

            r = 180;

        }

    // when the circle is bigger than the hight of the canvas, remove and show content

    } else if (r > canvas.height) {

        // done

    // when the circle is going left and is in the middle, zoom in

    } else if (cx < canvas.width / 2 && !goingright) {

        zooming = true;

    }

    setTimeout(draw, 7);

}

​

draw();