var width = window.innerWidth,
height = window.innerHeight;
h = Math.min(width,height)/5,
function Layer(layerName) {
this.canvas = document.getElementById(layerName);
this.canvas.width = width;
this.canvas.height = height;
this.ctx = this.canvas.getContext('2d');
this.ctx.strokeStyle = '#fff';
this.ctx.fillStyle = 'rgba(0,0,0,0.01)';
Layer.prototype.drawLine = function(x1, y1, x2, y2) {
Layer.prototype.drawDot = function(x1, y1) {
this.ctx.arc(x1, y1, 5, 0, 2*Math.PI);
function updatePosition(t) {
x = (a-b) * Math.cos(t) + h*Math.cos((a-b)/b*t) + width/2;
y = (a-b) * Math.sin(t) - h*Math.sin((a-b)/b*t) + height/2;
function renderFrame(time) {
updatePosition(time/(a/b * 1000) * 2 * Math.PI);
layer1.drawLine(oldX, oldY, x, y);
layer2.ctx.clearRect(0, 0, width, height);
layer1.ctx.fillRect(0,0,width,height);
requestAnimationFrame(renderFrame);
var layer1 = new Layer('layer1');
var layer2 = new Layer('layer2');
layer2.ctx.fillStyle = '#f00';
setTimeout(renderFrame, 100);