This works:

Code:
<head>
	<title>Look What I Drew</title>
	<meta charset=UTF-8">
	<style>
		canvas { border: 1px solid black;}
	</style>
	<script type="text\javascript" src="myJS.js"></script>
	<script>
		window.onload = myFirstFunction()
		{
			var canvas = document.getElementById("tshirtCanvas");
			var context = canvas.getContext("2d");
			context.fillRect(10, 10, 100, 100);
			context.beginPath();
			context.moveTo(100, 150);
			context.lineTo(250, 75);
			context.lineTo(125, 30);
			context.closePath();
			context.lineWidth = 5;
			context.stroke();
			context.fillStyle = "red";
			context.fill();
		}
	</script>
</head>
But this doesn't:
Code:
<head>
	<title>Look What I Drew</title>
	<meta charset=UTF-8">
	<style>
		canvas { border: 1px solid black;}
	</style>
	<script type="text\javascript" src="myJS.js"></script>
	<script>
		window.onload = myFirstFunction();
	</script>
</head>

where the file, myJS.js, contains this:
Code:
function myFirstFunction()
		{
			var canvas = document.getElementById("tshirtCanvas");
			var context = canvas.getContext("2d");
			context.fillRect(10, 10, 100, 100);
			context.beginPath();
			context.moveTo(100, 150);
			context.lineTo(250, 75);
			context.lineTo(125, 30);
			context.closePath();
			context.lineWidth = 5;
			context.stroke();
			context.fillStyle = "red";
			context.fill();
		}
Please help - because I obviously want to separate my javascript from my html.