Experiment: Canvas - repeating lines based on screen size.

This is my first canvas experiment, so be nice! I came up with this neat looking effect by repeating lines based on screen size. I am setting the canvas to the width and height of the browser's screen and then my math is based off of that. When you resize your browser, the lines are redrawn.

by Erik Woods

HTML

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

<footer>
    <p>I am setting the canvas to the width and height of the browser's screen and then my math is based off of that. When you resize your browser, the lines are redrawn.</p>
    <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

CSS

html {
	/* http://www.colorzilla.com/gradient-editor/#11b3ff+0,2265b7+99;Custom */
	background: #11b3ff; /* Old browsers */
	background: -moz-linear-gradient(left,  #11b3ff 0%, #2265b7 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#11b3ff), color-stop(99%,#2265b7)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #11b3ff 0%,#2265b7 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #11b3ff 0%,#2265b7 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #11b3ff 0%,#2265b7 99%); /* IE10+ */
	background: linear-gradient(left,  #11b3ff 0%,#2265b7 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11b3ff', endColorstr='#2265b7',GradientType=1 ); /* IE6-9 */
	background-attachment: fixed;
	background-repeat: no-repeat;
}

canvas#canvasbg {
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

p {
    padding: 0 0 10px 0;
}

footer {
    background: #ff0;
    border: 0 none;
    border-top: 1px solid #000;
    bottom: 0;
    color: #000;
    padding: 10px;
    position: fixed;
    width: 100%;
}

JavaScript

init();

$(window).resize(function() { // user resizes window
    drawCanvas();
}); // window resize

// ++ FUNCTIONS ++ //
function drawCanvas() {
    window.scrollTo(0, 0); // helps to determine window size
    canvas = document.getElementById('canvasbg'); // store canvas object
    if (canvas.getContext){ // check canvas
        sizeCanvas();
        
        var ctx = canvas.getContext("2d"); // store 2d context
        ctx.fillStyle = '#fff';
        
        ctx.beginPath(); // lines coming from left
        ctx.moveTo(0,0);
        for(x = 0; x < (canHeight / 20); x++) {
            ctx.lineTo(x*10,x*15);
            ctx.lineTo(0,x*20);
        }
        ctx.fill();
        
        ctx.beginPath(); // lines coming from bottom
        for(x = 0; x < (canHeight / 20); x++) {
            ctx.moveTo(x*30,canHeight*30);
            ctx.lineTo(x*30,canHeight*10);
            ctx.lineTo(canHeight/40*x,x*20);
        }
        ctx.fill();
        
        ctx.beginPath(); // lines behind them all
        for(x = canWidth / 30; x < (canWidth); x++) {
            ctx.moveTo(x*10,0*40);
            ctx.lineTo(x*10,x/x);
            ctx.lineTo(0,x*40);
        }
        ctx.fill();
    } // if
} // function drawCanvas()

function sizeCanvas() {
    canSel = $('canvas#canvasbg'); // store selector
    canOff = canSel.offset(); // store offset
    canLeft = Math.round(canOff.left); // store left offset
    canTop = Math.round(canOff.top); // store top offset
    winWidth = $(window).width(); // store window width
    winHeight = $(window).height(); // store window height
    canWidth = winWidth - canLeft; // new canvas width
    canHeight = winHeight - canTop; // new canvas height
    canvas.width = canWidth; // change canvas width
    canvas.height = canHeight; // change canvas height
} // function sizeCanvas()

function init(){
    drawCanvas(); // self explanitory
} // function init()