Question

I’m looking for a “draw over website effect”. Basically a click of a pen icon and an overlay will be put onto the screen upon which the user can draw. So far I’m having trouble with the code for two reasons:

1) It’s complicated to start adding colours, erasers and sizes

2) The canvas will not accept percentage widths, so I can’t overlay the whole website

I’ve looked at http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ and http://cool-php-tutorials.blogspot.co.uk/2011/05/simple-html5-drawing-app-with-saving.html

Both of these sites are good, but I was wondering if anyone knows of a pre-built solution to achieve this, or of a way to overcome the problems (mainly the second).

Thanks in advance!

Answer 1

The canvas will not accept percentage widths, so I can’t overlay the whole website

Just calculate document width and height with $(document).width() and $(document).height() and assign this values to the canvas.