javascript - How to apply canvas to whole document or how to draw on whole document? -

i have .aspx page , want draw on whole document using js.i'm newbie in js... example code(in aspx) allow me draw on 200x200 area:

    <canvas id="canvas" width="200" height="200"></canvas>      <script type ="text/javascript">     $(document).ready(function () {     ctx = document.getelementbyid('canvas').getcontext('2d');            ctx.fillstyle = "rgba(0, 0, 200, 0.5)";     ctx.fillrect(30, 30, 55, 50);     });     </script> 

how draw on whole document?because can't write like:

   <canvas id="canvas" $(document).width() $(document).height()></canvas> 

i want draw transparent rectangle on whole document , see page content behind.

here solution(thnx kirilloid): css:

    #canvas {     position: absolute;     left: 0;     top: 0;     } 

js:

    function updatecanvas(width,height) {     var $canvas = $("#canvas");     $canvas.attr('width', $(document).width())     $canvas.attr('height', $(document).height());     var ctx = $canvas.get(0).getcontext('2d');     ctx.fillstyle = "rgba(0, 0, 200, 0.5)";     ctx.fillrect(0, 0, width, height/2);     ctx.fillstyle = "rgba(0, 200, 0, 0.5)";     ctx.fillrect(0, height/2, width, height);     }      $(document).ready(function () {     updatecanvas($(document).width(), $(document).height())     }); 

there's no way draw on page itself. you'll need make canvas fit whole window , update sizes (and redraw) on window resize.

if change sizes in css, canvas stretched images do. if change width , height attributes, it's cleared.

css:

#canvas {     position: fixed;     left: 0;     top: 0; } 

the code:

function updatecanvas() {     var $canvas = $("#canvas");     $canvas.attr('width', $(document).width())     $canvas.attr('height', $(document).height());     var ctx = $canvas.get(0).getcontext('2d');     ctx.fillstyle = "rgba(0, 0, 200, 0.5)";     ctx.fillrect(30, 30, 55, 50); } $(window).on('resize', updatecanvas); // maybe, add thresholding updatecanvas(); 

upd: came more performant solution: set canvas sizes window.screen , put overflow: hidden container fitting whole window. won't need redraw or resize canvas @ (multi-display users can still problem).