Canvas takes the whole document body in html and make it hidden but drawable

Question

I found this in a stackoverflow question on how to draw in canvas http://jsfiddle.net/ArtBIT/kneDX/ and now I want the canvas to cover my whole html page. For example:

<body>
  <div id="2">
    //code
  </div>
  <div id="2">
    //code
  </div>
</body>

So the canvas will be attached to the page and the user could draw over the content of the page. So is there any way to create the canvas inorder to take the 100% of the body be hidden apart from the drawing lines?

Edited:

How can I draw lines continuously without making circles in the above code? Also is there any way to draw something over the text without selecting it when you pass the mouse over it?

I don't even know why you posted that snippet with `` tag with two `
` tags? — bits, Dec 14 '12 at 20:09

score 3 · Accepted Answer · edited May 23 '17 at 12:21

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.

that worked perfectly! Thank you very much! Can you see the updated version of my question too? — kokosg, Dec 15 '12 at 12:44

score 1 · Answer 2 · edited May 23 '17 at 12:13

1

Pass in the right width and height params instead of (200, 200)

Using window.screen.width and window.screen.height gives you this: http://jsfiddle.net/kneDX/878/

Update:

With this we will end up in canvas being as big as window and not the same size as client area. See apsillers's answer.

edited May 23 '17 at 12:13

Community

1
1

answered Dec 14 '12 at 20:02

bits

8,110
8
46
55

Using the dimensions from `window.screen` makes the canvas as large as the user's *entire monitor*, not as big as the page or browser viewport. – apsillers Dec 14 '12 at 20:19
@apsillers Thanks for pointing out and I agree with you. That was a starting point for OP. Following your answer should get OP to his destination. – bits Dec 14 '12 at 20:23

Canvas takes the whole document body in html and make it hidden but drawable

2 Answers2