On both of my PC monitors, when I draw a line from (0,0) to (window.innerWidth,window.innerHeight), the line fills the screen diagonally. However window.innerWidth and window.innerHeight are 20% less than the screen resolution specified by the monitor manufacturer and agreed with by the Windows 10 display information. Strangely enough, this wasn't the case 6 months ago when I first tested similar code. Any ideas?
<!doctype html>
<html >
<script type="text/javascript">
window.addEventListener("load", windowLoadHandler, false);
function windowLoadHandler() { init();} // Is this still necessary?
function init() {
tC = document.getElementById("can1"); ctx = tC.getContext("2d");
cw= tC.width = window.innerWidth; ch = tC.height = window.innerHeight;
ctx.fillStyle = "yellow"; ctx.fillRect(0,0,tC.width,tC.height);
ctx.fillStyle = ctx.strokeStyle= "black"; ctx.font = "20pt Arial";
ctx.fillText("Cwidth = " + cw + " ; Cheight = " +ch,200,300);
ctx.moveTo(0,0); ctx.lineTo(cw,ch); ctx.stroke();
}
</script>
<form>
<div > <canvas id="can1" width= 50px height = 50px > </canvas> </div>
</form>
</html>