ほんっとにはじめてのHTML5とCSS3
<canvas>サンプル11-1

Canvasをサイトの背景にしよう1

●Canvasのサイズをブラウザ ウィンドウサイズと一致させる

Canvasのサイズをブラウザ ウィンドウサイズと一致させる

背景のグラデーションは、前回の「[69-11] canvasでビットマップを操作しよう」のサンプル1のソースをそのままコピペで使っています。
Canvasは、CSSの「width:100%; height:100%;」ではウィンドウサイズにできず、下記サイトを探し当てました。jQueryを使う方法です。
Atsuki Tairaさんの「2CRAVITY」- canvasを全画面に表示する

div#wrapper の中に canvasをすっぽりといれてしまい、div#wrapperはCSSでサイズをbodyに対して100%に。
Canvasのサイズは、このdiv#wrapper のサイズを javaScriptで受け取ります。

Javascriptはこちら。

// ページをロードしたりウィンドウのリサイズするたびに実行
$(function () {
	sizing();
	Draw();
	$(window).resize(function() {
		sizing();
		Draw();
	});
});
// div#wrapperからcanvas#cnvsのサイズをもらう(#wrapperのサイズはCSSで)
function sizing(){
	$('#cnvs').attr({height:$('#wrapper').height()});
	$('#cnvs').attr({width:$('#wrapper').width()});
};
// ここからは前回(ImageData)のサンプル1と同じです。
function Draw() {	
  var ctx = document.getElementById('cnvs').getContext('2d');
  var imageData = ctx.createImageData(cnvs.width, cnvs.height);
  var width = imageData.width, height = imageData.height;
  var imgd = imageData.data;
  for (var y = 0; y < height; ++y) {
    for (var x = 0; x < width; ++x) {
    var base = (x+y*width)*4;
    imgd[base+0] = 255*x/width;
    imgd[base+1] = 255*y/height;
    imgd[base+2] = Math.max(255-x-y,0);
    imgd[base+3] = 255;
    }
  }
  ctx.putImageData(imageData, 0, 0);
};

HTMLはこちら。
ウィンドウサイズの取得、リサイズのために jQueryを使いますので、<header>でjQueryを読み込みます。

<body>
<div id="wrapper"><canvas id="cnvs"></canvas></div>
<div id="container"> <!--ここにコンテンツ--> </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script><!--ここにcanvas用のスクリプト--></script>
</body>

CSSはこんなかんじにしてみました。
(ほかにも z-index を使う方法などあります。サイトのレイアウトに合わせてみてください。)
このサンプルページでは、#wrapperをフルサイズにして「position: fixed」に。
コンテンツが入る #containerは position: absolute にしています。

body{
	width:100%;
	margin: 0;
	padding: 0;
	color: rgba(0,0,0,0.7);}
body #wrapper{
	width: 100%;
	height:100%;
	min-height:100%;
	overflow: hidden;
	position: fixed;}
#container {
	position: absolute;
	top:0;
	right:20px;
	left:20px;}