sample: draw line with the coord depends on window size

by sii_side

HTML

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

CSS

* {
  margin: 0;
  padding: 0;
}

#c {
  background-color: #fcc;
}

JavaScript

window.addEventListener("resize", drawLine, false)
window.addEventListener("load", drawLine, false);

function drawLine() {
	//windowの幅と高さ
	var dw = document.documentElement.clientWidth;
  var dh = document.documentElement.clientHeight;

	//windowの幅と高さにcanvasを合わせる
	var c = document.querySelector("#c");
	c.width = dw;
  c.height = dh;

	var ctx = c.getContext("2d");

	//一旦canvasの内容をclear
	ctx.clearRect(0, 0, dw, dh);
  
  //windowの幅と高さを座標に使って線を引く
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(dw - 50, dh - 30);
  ctx.stroke();
  ctx.closePath();
}