Edit in JSFiddle

var Stage = function( sel ){
    console.clear();
		this.canvas = document.querySelector(sel);
    this.ctx = this.canvas.getContext('2d');
    this.w = 0;
    this.h = 0;
    
    // on resize
    var self = this;
    window.addEventListener('resize',function(){ self.updateDimensions() })
    this.updateDimensions();
}

Stage.prototype.updateDimensions = function(){
	var styles = window.getComputedStyle(this.canvas);
    this.w = parseInt(styles.width, 10);
    this.h = parseInt(styles.height, 10);
    this.canvas.width = this.w;
    this.canvas.height = this.h;
}

Stage.prototype.start = function(){
	var self = this;
  (function animationloop(){
    requestAnimationFrame(animationloop);
    self.step();
  })();
}

Stage.prototype.step = function(){
	this.update();
  this.render();
}

Stage.prototype.update = function(){
	this.fooX = this.fooX+1 || 0;
}

Stage.prototype.render = function(){
	this.ctx.fillRect(this.fooX, 0, 10, 10)
}



new Stage('#c').start();
<canvas id="c"></canvas>
html, body { height: 100%; }
body { background: #ccc; margin: 0; }
canvas { width: 100%; height: 100%; outline: 1px solid red; display: block; background: #333; }