Full Screen Canvas

by jpeter06

HTML

<canvas id="canvas"></canvas>

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */
html, body { width:100%; height:100%; } /* j full screen*/
canvas { display:block; } /* remove  scrollbars */
canvas {    background: #eee;}

JavaScript

//////////////////DRAWER //////////////////////

var Drawer = {
    color :"red",
    cont:0,
    canvas:document.getElementById('canvas'),
    ctx:canvas.getContext('2d'),
    
    //////// RENDER //////////////////////
 render: function(requestFrame) {
    var _this=this;
    if(requestFrame)
        window.requestAnimFrame(function(){_this.render(true);});

    this.cont=this.cont>300?0:this.cont+1;    ctx=this.ctx;
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(100+this.cont, 100 ,20,0,2*Math.PI,true);
    ctx.fill();
},
    
    
    
    ////////////////// INIT //////////////////
    
    
    init:function(){
    var _this=this;
    window.addEventListener('resize', function(){_this.resizeCanvas();}, false);
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.render(true);
},
    
    
    
    
    resizeCanvas:function() {
        //this.log(window.innerWidth+' '+window.innerHeight);
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.render(false);//should be defined.
},
    log:function(obj){
        console.log(obj);
    }
}

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

Drawer.init();
//window.addEventListener('resize', Drawer.resizeCanvas, false);