HD Canvas

by wittnl

CSS

body {
    margin: 0;
    padding: 0;
    font: 16px/20px Georgia, serif;
}

JavaScript

window.body = document.body,
    window.canvas = document.createElement("canvas"),
    window.ctx = canvas.getContext("2d");

function init() {
    body.appendChild(canvas);
    draw();
}

function draw() {
        var baseHWRatio = 32 / 960,
            rect = canvas.parentNode.getClientRects()[0]; //self.innerWidth;
        canvas.width = rect.width; //self.innerWidth; //body.scrollWidth;
        canvas.height = rect.height; //self.innerHeight; //body.scrollHeight;
    
    ctx.font = baseHWRatio * rect.width + "px Georgia";
    
        var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("0.5","blue");
        gradient.addColorStop("1.0","red");
    
        // Fill with gradient
        ctx.fillStyle = gradient;
        ctx.fillText("Foo Bar baz",10,90);
}

$(document).ready(function() {
    
    $(window).resize(function(e) {
        canvas.width = body.scrollWidth;
        canvas.height = body.scrollHeight;
        
        draw();
    });

    init();

});