canvas - Drawing a responsive diagonal line -

this want: page split in 2 vertical parts: red 1 contents (200px in fiddle) + right part diagonal goes top-left (200, 0) bottom-right of browser window.

i'd line responsive page changing: every time page resized, line'd neat diagonal between these points. (200, 0 - bottom-right of browser window)

i've been trying manage canvas function, may wrong way. can me?

[http://jsfiddle.net/ropvw3jm/3/][1] 

this trick, check comments info:

// canvas , context draw in  var canvas = document.getelementbyid('canvas');  var context = canvas.getcontext('2d');    function diagonallinetobottomright(){    // reset canvas size of window - clears canvas    canvas.width = window.innerwidth;    canvas.height = window.innerheight;    // set line color    context.strokestyle = 'red';    // set point line starts    context.moveto(200, 0);    // draw line bottom corner    context.lineto(window.innerwidth, window.innerheight);    // draw pixels canvas    context.stroke();  }    // set function execute when window size changes  window.addeventlistener('resize', diagonallinetobottomright, false);  // execute function on initial load  diagonallinetobottomright();

<canvas id="canvas"></canvas>

i guessing, however, don't want canvas overlap content on side. can done combining css , js make canvas 200 pixels less wide page:

// canvas , context draw in  var canvas = document.getelementbyid('canvas');  var context = canvas.getcontext('2d');    function diagonallinetobottomright(){    // reset canvas size of window - clears canvas    canvas.width = window.innerwidth - 200;    canvas.height = window.innerheight;    // dont draw when not wide enough    if(window.innerwidth - 200 < 200) return;    // set line color    context.strokestyle = 'red';    // set point line starts    context.moveto(0, 0);    // draw line bottom corner    context.lineto(window.innerwidth - 200, window.innerheight);    // draw pixels canvas    context.stroke();  }    // set function execute when window size changes  window.addeventlistener('resize', diagonallinetobottomright, false);  // execute function on initial load  diagonallinetobottomright();

html, body {    height: 100%;  }  nav {    position: absolute;    left: 0;    top: 0;    background: red;    width: 200px;    height: 100%;  }  canvas {    position: fixed;    top: 0;    right: 0;  }

<canvas id="canvas"></canvas>  <nav></nav>