canvas proxy

HTML

<canvas></canvas>

CSS

html, body {
    height:100vh;
    width:100vw;
    overflow:hidden;
}
* {
    margin:0px;
    padding:0px;
}
canvas {
  width:100%;
    height:100%;
    outline:black 1px solid;
}

JavaScript

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var c = document.createElement('canvas');
c.width = screen.width;
c.height = screen.height;
var resize = function () {

    canvas.width = canvas.getBoundingClientRect().width;
    canvas.height = canvas.getBoundingClientRect().height;
    c.getContext('2d').drawImage.call(ctx, c, 0, 0);
};
var funcs = Object.getOwnPropertyNames(ctx.__proto__).filter(function (e) {
    return (typeof ctx[e]) === 'function'
});
Object.getOwnPropertyNames(ctx).forEach(function (e) {
    Object.defineProperty(ctx, e, {
        get: function () {
            return c.getContext('2d')[e];
        },
        set: function (f) {
            c.getContext('2d')[e] = f;
        }
    });
});
funcs.forEach(function (e) {

    ctx[e] = function () {
        var v = c.getContext('2d')[e].apply(c.getContext('2d'), arguments);
        requestAnimationFrame(draw);
        return v;
    };
});

function draw() {
    canvas.width = canvas.width;
    c.getContext('2d').drawImage.call(ctx, c, 0, 0);
}

window.addEventListener('resize', resize);
resize();

ctx.font = "25px Arial";

ctx.fillStyle = 'rgba(0,0,0,1)';
ctx.fillRect(0, 0, ctx.measureText('0').width, 27*10);
ctx.fillStyle = 'rgba(255,255,255,1)';

ctx.textBaseline="top";
ctx.strokeStyle = 'rgba(255,100,100,.5)';
ctx.beginPath();
for(var i = 0;i<10;i++){
ctx.fillText(i+'', 0, i*27);
ctx.strokeText(i+'',0,i*27);
    ctx.moveTo(0,i*27);
    ctx.lineTo(ctx.measureText(i+'').width,i*27);
}


ctx.stroke();