Canvas Base Lineheight guide

HTML

<canvas id="canvas">
</canvas>
<p>I've been known to dabble in a spot of website design and development and graphic design, and to create the odd digital abstract or typography art piece now and again. Yes, I'm British.</p>
<p>I've been known to dabble in a spot of website design and development and graphic design, and to create the odd digital abstract or typography art piece now and again. Yes, I'm British.</p>
<p>I've been known to dabble in a spot of website design and development and graphic design, and to create the odd digital abstract or typography art piece now and again. Yes, I'm British.</p>
<input type="button" value="hide" id="hide" />

CSS

#canvas { position: fixed; top: 0; left: 0; z-index: 99; }
#hide { position: fixed; bottom: 0; right: 0; z-index: 100; }
body { font-size: 18px; padding: 0; margin: 0; font-family: arial; }
p { line-height: 32px; margin: 0; margin-bottom: 32px;  }

JavaScript

// get the canvas element using the DOM
var canvas = document.getElementById('canvas');
var height = document.body.clientHeight;
var width = document.body.clientWidth;
var baseLineHeight = 32;
var skip = 10;
var start = (function() {
    return baseLineHeight + skip;
})();
 
  // Make sure we don't execute when canvas isn't supported

function draw() {
    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d'); 
    ctx.lineWidth=1;
    ctx.setStrokeColor('#444');
    for (i=0;i<10;i++){
        ctx.beginPath();
        ctx.moveTo(1,(i*baseLineHeight)+0.5);
        ctx.lineTo(width,(i*baseLineHeight)+0.5);
        ctx.stroke();
    }
}


// resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            width = document.body.clientWidth;
            /**
             * Your drawings need to be inside this function otherwise they will be reset when 
             * you resize the browser window and the canvas goes will be cleared.
             */
            draw();
            
    }
    resizeCanvas();

var button = document.getElementById('hide');
button.addEventListener('click', function() {
    if(canvas.style.display != 'none') {
        canvas.style.display = 'none';
        this.value = 'show';
    } else {
        canvas.style.display = 'block';
        this.value = 'hide';
    }
    
});