Saturday 2 February 2013

HTML5 Linking external JavaScript

In order to make JavaScript works externally you need to specify within the JS function to do it once the content is available.

js:
document.addEventListener('DOMContentLoaded', drawCanvas, false);
function drawCanvas() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
}

html:
<html>
<head>
  <script src="common/js.js"></script>
</head>
<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000"></canvas>
</body>
</html>