Set HTML Canvas as Page Background

An html5 canvas element in the background of my page?

You could try setting a CSS style on the canvas where it has a position: fixed (or absolute as appropriate), and then any content that follows it (as opposed to container content as you've given in your example) should sit on top of it.

Set HTML Canvas as page background

canvas {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

How to fill the whole canvas with specific color?

Yes, fill in a Rectangle with a solid color across the canvas, use the height and width of the canvas itself:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

canvas{ border: 1px solid black; }

<canvas width=300 height=150 id="canvas">

Make canvas the background of an html document

Just set the <canvas>'s z-index to -1. If your canvas is covered by containers on top, simulate custom events using createEvent.^[1]

Demo: http://jsfiddle.net/DerekL/uw5XU/

var canvas = $("canvas"),  //jQuery selector, similar to querySelectorAll()
//...

function simulate(e) {
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("mousemove", true, true, window,
        0, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null);
    canvas[0].dispatchEvent(evt);
}

$("body > *").each(function () {
    this.addEventListener("mousemove", simulate);
});

Use canvas as a CSS background

This has been possible in WebKit since 2008, see here.

<html>
 <head>
 <style>
 div { background: -webkit-canvas(squares); width:600px; height:600px; border:2px solid black }
 </style>

 <script type="application/x-javascript">
function draw(w, h) {
 var ctx = document.getCSSCanvasContext("2d", "squares", w, h);

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
}
 </script>
 </head>
 <body onload="draw(300, 300)">
   <div></div>
 </body>

</html>

Currently, Firefox 4 contains a feature, which allows you to use any element (including canvas) as a CSS background, in this fashion:

<p id="myBackground1" style="background: darkorange; color: white;  width: 300px; height: 40px;">
  This element will be used as a background.
</p>
<p style="background: -moz-element(#myBackground1); padding: 20px 10px; font-weight: bold;">
  This box uses #myBackground1 as its background!
</p>

See Mozilla hacks for specifics.

How to put p5 canvas into our div background?

This isn't really a P5.js question. It's more a general HTML and CSS question. I recommend googling something like html use canvas as background of div for a ton of results, including:

Use <canvas> as a CSS background
Set canvas element as background of a div element
An html5 canvas element in the background of my page?
Set HTML Canvas as page background

Taking a step back, it's worth noting that Stack Overflow isn't really designed for general "how do I do this" type questions. It's for more specific "I tried X, expected Y, but got Z instead" type questions. So you should really try to do some research and write some code and then post a MCVE if you get stuck. Good luck.

Set canvas element as background of a div element

Looks like you searching for toDataURL().

UPD:
Here a usage exaple:

dataUrl = your_canvas.toDataURL();
your_div.style.background='url('+dataUrl+')'

Live demo on jsFiddle

Set HTML Canvas as Page Background

An html5 canvas element in the background of my page?