First, make the height
and width
properties of the canvas equal to the page height and page width. (Getting those values is quite difficult, so see the linked questions for the best way to do it -- or just use jQuery.)
Next, add some CSS to make the canvas sit in the absolute top-left corner of the page:
#canvas {
position: absolute;
top: 0;
left: 0;
}
Then, don't change the background color of the canvas as you currently do by calling ctx.clearTo
. Canvases are transparent by default, so you'll be able to see the page underneath of it, as long as you don't change the background color.