In 2018 I'd use
html, body {
margin: 0;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -9999;
}
Here's why:
I used to recommend canvas { width: 100vw; height: 100vh; ...} but sadly mobile browsers broke vh so it's useless and will apparently be useless forever. See this blog post.
display: block; fixes some issues with scrollbars on certain browsers. Some pages use html, body { overflow: none; } but again that doesn't make sense if your page ends up needing to be taller than the screen/window.
position: fixed; makes the canvas position relative to the top of window so it won't scroll with the page. If you use position: absolute then the canvas will scroll off the top if the page is taller than the screen/window. For example this page.
top: 0; left 0; puts it at the top left. Without that it would default to it's default position which is inside the body's margins. Often this is solved by setting body { margin: 0; } but generally that means you end up needing some other container to add a margin back in otherwise your normal content gets positioned at the edge of the window.
z-index: -9999; is there to try to force it further back than anything else just in case the page itself is using some negative values for z-index
Here's an example as a snippet
var ctx = document.querySelector("canvas").getContext("2d");
function resize(canvas) {
var width = canvas.clientWidth;
var height = canvas.clientHeight;
if (width != canvas.width || height != canvas.height) {
canvas.width = width;
canvas.height = height;
}
}
function render(time) {
time *= 0.001;
resize(ctx.canvas);
ctx.save();
var w = ctx.canvas.width;
var h = ctx.canvas.height;
var hw = w / 2;
var hh = h / 2;
ctx.clearRect(0, 0, w, h);
ctx.strokeStyle = "red";
ctx.translate(hw, hh);
ctx.rotate(time * 0.1);
for (var ii = 0; ii < 100; ++ii) {
ctx.rotate(Math.sin(time * 0.1) * 0.2);
ctx.strokeRect(-hw, -hh, w, h);
ctx.scale(0.9, 0.9);
}
ctx.restore();
requestAnimationFrame(render);
}
requestAnimationFrame(render);
html, body {
margin: 0;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
display: absolute;
position: fixed;
top: 0;
left: 0;
z-index: -9999;
}
<canvas></canvas>
<pre>
some content that is in front of the canvas
Let's
try
to
make
sure
it's
long
enough
that
we
can
scroll
down
the
page
so
we
can
see
that
position: fixed;
is
a
better
choice
than
position: absolute;
</pre>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
