In 2016, I will use
canvas { width: 100vw; height: 100vh; display: block; position: fixed; top: 0; left: 0; z-index: -9999; }
That's why:
Many people use canvas { width: 100%; height: 100% } canvas { width: 100%; height: 100% } , but this may not make much sense. You do not want the canvas to be 100% of the body. You want it on 100% of the screen / window. What does canvas { width: 100vw; height: 100vh; } canvas { width: 100vw; height: 100vh; } canvas { width: 100vw; height: 100vh; } . This is 100% of the width of the viewport and the height of the viewport.
This means that you do not need to set the body to a height of 100%, which also makes no sense, especially if the page is above the window / screen
display: block; fixes some problems with scrollbars in certain browsers. Some pages use html, body { overflow: none; } html, body { overflow: none; } , but again, it doesn’t make sense if your page ends up having to be higher than the screen / window.
position: fixed; makes the canvas position relative to the top of the window, so it won’t scroll from the page. If you use position: absolute , then the canvas will scroll to the top if the page is above the screen / window. For example, this page .
top: 0; left 0; places it in the upper left corner. Without this, it will by default use the default position, which is inside the body fields. Often this is solved by setting body { margin: 0; } body { margin: 0; } , but as a rule, this means that you need some other container to add the field back, otherwise normal content will be located at the edge of the window.
z-index: -9999; exists to try to pull it back than anything else, only if the page itself uses some negative values for z-index
Here is an example as a fragment
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);
canvas { width: 100vw; height: 100vh; 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 long enough that we can scroll down the page so we can see that position: fixed; is a better choice than position: absolute; </pre>
And here is an example outside of SO so you can view its full size.
iframe also works
Note that there is a problem that if your canvas animation is interactive, the elements in front of the canvas will contain mouse / touch events. There is no such easy decision that I know of. You can mark everything except canvas / iframe as pointer-events: none and mark canvas / iframe as pointer-events: auto , but then you will encounter a problem that the text on your page cannot be selected and the links cannot be pressed. Then you can say that the <a> tags have pointer-events: auto tags, so the links work, but I'm sure there will be problems there and there, depending on what information is on your page (trying to copy the email address or location address, etc ...)