This page has a fullscreen <canvas> background that sizes itself based on the window size. It will redraw the canvas only when resizing up.
A clean version without any commentary can be found here.
The markup is pretty standard, with the exception of the bgCanvas <canvas> being the first element on the page.
The <canvas> gets position: fixed; so it won’t hold the page open. Then the wrapper gets position: absolute; to pull it up over the background to the top of the page, and a left: 0; right: 0; to make sure it fills out the entire width too. The content wrapper gets whatever styling your page needs for width, color, etc.
#bgCanvas {
position: fixed;
}
.wrapper {
position: absolute;
left: 0px;
right: 0px;
}
.content-wrapper {
width: 920px;
margin: 40px auto;
padding: 30px;
background-color: #fff;
}
To size the canvas to the browser window, I’ve created an onResize function that sizes the canvas to the window size plus 100px (buffer). Then I've bound this function to the resize event of the window, so it will fire when resizing the browser. To keep it from firing way too much, I strongly recommend Ben Alman’s throttle/debounce plugin. It’s billed as a jQuery plugin, but it also works without jQuery (which is awesome). If the window size gets within 100px of the canvas edge, it will draw a new one thats 200px larger than the window. This ensures that the canvas only redraws if someone is sizing up, and not very often, keeping things pretty efficient.
var bgCanvas = document.getElementById('bgCanvas');
function render() {
bgCanvas.patternizer({
stripes : [
{
color: '#ffb4d5',
rotation: 45,
opacity: 80,
mode: 'normal',
width: 30,
gap: 10,
offset: 0
},
{
color: '#3a83d6',
rotation: 200,
opacity: 50,
mode: 'plaid',
width: 10,
gap: 10,
offset: 0
}
],
bg : '#ffffff'
});
}
// resize the canvas to the window size
function onResize() {
// number of pixels of extra canvas drawn
var buffer = 100;
// if extra canvas size is less than the buffer amount
if (bgCanvas.width - window.innerWidth < buffer ||
bgCanvas.height - window.innerHeight < buffer) {
// resize the canvas to window plus double the buffer
bgCanvas.width = window.innerWidth + (buffer * 2);
bgCanvas.height = window.innerHeight + (buffer * 2);
render();
}
}
function init() {
onResize();
// create a listener for resize
// cowboy's throttle plugin keeps this event from running hog wild
window.addEventListener('resize', Cowboy.throttle(200, onResize), false);
}
init();