Next page | Contents page |

Setting canvas size

Having got a reference to the canvas we can now set its width and height to any numerical values we wish. It is quite likely we would want to make it fill either the browser's window or the whole screen. For this purpose there are some predefined data values, maintained by the browser:


	window.innerWidth
	window.innerHeight
	screen.availWidth
	screen.availHeight

Select a pair of those to use in our run function like this:


	function run()
	{
	  let cnv = document.getElementById("cnv");
	  cnv.width = window.innerWidth;
	  cnv.height = window.innerHeight;
	  // more to follow
	}

This will cause the canvas to fill the window.

Notice the way each line ends with a semicolon. This is not compulsory in Javascript but it is a good habit to get into. It prevents some errors that could be hard to diagnose.
Next page | Contents page |